Input

Retrieve text input from a user.

The Input contain an additional Hooks, see subsection useInput for details.

General

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.

Type

Differentiate states by color.

Rounded

You can completely round the corners of any type of Input with the rounded property.

Icon

Specify an icon component.

Clearable

Add a clear button in the input box.

Password

Input component with a show/hide password functionality, Important: You have to use the Input.Password component.

Get Change

Capture changes in input.

Imperative API

Update component in an uncontrolled way.

APIs

type InputTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

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