Input

Retrieve text input from a user.

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

General

Basic input field.

Floating Label

With floating the label sits inside the field and moves up when you type or focus. It replaces the placeholder.

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.

Variants

Use filled, light, ghost or subtle to change the surface of any colored Input.

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.

Date and time

htmlType takes the native types, like date, time and datetime-local. The browser draws the picker, in the language and with the keyboard of the user, and it follows the theme.

Imperative API

Update component in an uncontrolled way.

Login form

Validate on submit and say what to fix, under the field. The error type turns the field red.

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
  }
}