GWAN.DEV
GWAN.DEV
HomeDocumentationThemesBlog

Foundations

Icons

Actions

Buttons

Form Controls

Input

Text Area

Select Dropdown

Filter Dropdown

Checkbox

Radio Button

Switch

File Uploader

Color Picker

Multi Select

Search Input

Slider

OTP Input

Date Picker

Time Picker

Date Range Picker

Data Display

Table

Pagination

Progress Bar

Stat Card

Circular Progress

Navigation

Side Menu

Menu Bar

Tabs

Breadcrumb

Ellipsis

Content & Layout

Card

Divider

Banner

Carousel

Accordion

Timeline

Stepper

List

Overlays

Modal

Drawer

Popover

Command Palette

Dropdown Menu

Context Menu

Indicators

Tags

Chips

Badge

Avatar

Avatar Group

Tooltip

Skeleton

Spinner

Feedback

Snackbar

Alert

Callout

State

Input

Playground
Actions
  1. Interact with the preview to see callbacks fire.
Content
string

Current text. Controlled: update it from onChange.

Default—
string

Label above the field. Also names the field for screen readers.

Default—
string

Hint shown while the field is empty.

Default""
Appearance
FORM_ELEMENT_SIZE

Field height. SM for dense layouts.

DefaultFORM_ELEMENT_SIZE.MD
FORM_ELEMENT_EDGE_STYLE

Corner style.

DefaultFORM_ELEMENT_EDGE_STYLE.ROUNDED
Behaviour
"text" | "email" | "password" | "number" | "search" | "tel" | "url"

Native input type.

Default"text"
boolean

Blocks input and dims the field.

Defaultfalse
boolean

Adds an asterisk to the label and marks the field as required.

Defaultfalse
boolean

Shows the error style. Turns on errorMessage.

Defaultfalse
Events
(e: ChangeEvent<HTMLInputElement>) => void

Native change event. Read the text from e.target.value.

Default—
Logged in Actions
() => void

Adds a clear button while there's a value. Called when it's clicked.

Default—
Not passed
Advanced
string

Extra classes on the wrapper, e.g. a width.

Default""
string

Extra classes on the field itself.

Default""

Also accepts global HTML attributes and event handlers (id, aria-*, onBlur, onKeyDown…), passed to the <input>.

Usage
import { useState } from "react";
import { Input } from "gwan-design-system";

const Example = () => {
  const [value, setValue] = useState("");

  return (
    <Input
      value={value}
      label="Email"
      placeholder="you@example.com"
      onChange={(e) => setValue(e.target.value)}
    />
  );
};