Input is a text field: a one-line input, a password field or a multi-line textarea, in a bordered box that can also hold a prefix, a suffix, a clear button, a spinner and a character count. It sits on one line with a Button of the same size.

#Demos

#Basic

type="textarea" renders a multi-line field.

#Size

tiny, small, medium (default) and large, the same heights as Button.

#Round

round gives a text field a pill shape.

#Prefix and suffix

prefix and suffix take any content: an icon, a currency, a unit.

#Password

type="password" with showPasswordOn adds an eye button: click toggles the password, mousedown shows it only while the button is held.

#Clearable

clearable adds a clear button that shows while the field has a value and is hovered or focused. It empties the field, calls onClear and keeps the focus in the field.

#Autosize

autosize lets a textarea grow with its text: true starts at one row, { minRows, maxRows } bounds it and scrolls past maxRows. Without it, rows sets the height (default 3) and the textarea can be resized vertically.

#Count

showCount shows the length, against maxLength when set. A textarea shows it under the text.

#Status

status colors the border for validation: success, warning or error. Pair error with aria-invalid and a message the field points at with aria-describedby.

#Loading

loading shows a spinner at the end. loading={false} keeps the spinner’s room, so the text doesn’t shift when loading starts.

#Disabled and read-only

disabled blocks the field; readOnly keeps it focusable and selectable but not editable. Neither shows the clear button.

#Controlled

Pass value and onUpdateValue to own the value. null means empty.

#Native props and ref

Native attributes and events (id, name, autoComplete, role, aria-*, onKeyDown, …) go to the native input or textarea, and so does ref, so you can call focus() or select() on it. inputProps takes more of them; its type replaces the native type of a text field, e.g. email or search.

#Input group

InputGroup joins Inputs, Buttons and InputGroupLabels into one row with shared borders.

#Accessibility

Give every field a visible <label htmlFor> or an aria-label; id goes to the native element. The clear button is left out of the tab order (Select All and Delete do the same from the keyboard); the password toggle is a toggle button with aria-pressed, reachable by Tab when showPasswordOn="click". Their labels come from the ConfigProvider locale (Input.clear, Input.showPassword).

#Props

#Input

className and style go to the bordered box. Every other native attribute and event, including onFocus, onBlur, onKeyDown, role and aria-*, goes to the native input or textarea. For a pair of values, use two Inputs.

#InputGroup

InputGroup takes native div attributes and a ref. Give a group of related fields an aria-label or role="group" when it needs a name.

#InputGroupLabel

InputGroupLabel also takes native span attributes and a ref.