Input

Retrieve text input from a user.

Default

Basic input field.

Sizes

Inputs of different sizes.

Set width

Specify width or other styles.

unwritable

Disable interactive inputs.

inline label

Show a short label in the line.

block label

Labels for custom styles.

status

Differentiate states by color.

Icon

Specify an icon component.

Clearable

Add a clear button in the input box.

Password

Get Change

Capture changes in input.

With useInput

Use hooks to capture changes.

Imperative API

Update component in an uncontrolled way.

APIs

Input.Props

AttributeDescriptionTypeAccepted valuesDefault
valueinput valuestring--
initialValueinitial valuestring--
placeholderplaceholderstring--
sizeinput sizeNormalSizesInputSizesmedium
statuscurrent statusNormalTypesInputStatusdefault
readOnlynative attrboolean-false
disableddisable inputboolean-false
clearableshow clear iconboolean-false
labeltext label for inputstring--
labelRighttext label at right for inputstring--
iconicon for inputReact.ReactNode--
iconRighticon at right for inputReact.ReactNode--
iconClickableicons are clickableboolean-false
onIconClickclick icon event(e: React.ChangeEvent) => void--
onChangechange event(e: React.ChangeEvent) => void--
onClearClickclear icon event(e: React.MouseEvent) => void--
refforwardRefRef<HTMLInputElement | null>--
...native propsInputHTMLAttributes'alt', 'type', 'className', ...-

Input.Password.Props

AttributeDescriptionTypeAccepted valuesDefault
hideTogglehide toggle iconboolean-false
...input propsInput.PropsInput.Props-

InputSizes

type InputSizes = 'mini' | 'small' | 'medium' | 'large'

InputStatus

type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'

useInput

type useInput = (
  initialValue: string,
) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  reset: () => void
  bindings: {
    value: string
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  }
}