Back to Input
View full API on Input
Input
Icons & clear
Leading/trailing icons and a clearable search field.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | React.ReactNode | — | Field label. |
| helpText | React.ReactNode | — | Supplementary help text shown when there's no error. |
| error | React.ReactNode | — | Error text; also sets `aria-invalid` and switches to the destructive style. |
| size | "sm" | "md" | "lg" | md | Field height. |
| leadingIcon / trailingIcon | React.ReactNode | — | Icon slots either side of the input. |
| icon | React.ReactNode | — | Shorthand icon slot — any React node (custom SVG, Icon, emoji). Defaults to leading. |
| iconPosition | "leading" | "trailing" | leading | Which side the `icon` prop renders on. |
| clearable | boolean | — | Shows a clear button once the field has a value. |
| value / defaultValue | string | — | Controlled / uncontrolled value. |
| onValueChange | (value: string) => void | — | Convenience change handler (in addition to native onChange). |
| className | string | — | Merged onto the native <input> element. |
| containerClassName | string | — | Merged onto the outer field wrapper. |
| wrapperClassName | string | — | Merged onto the bordered input wrapper. |
| onBlur, onFocus, onKeyDown, onChange, … | InputHTMLAttributes<HTMLInputElement> | — | All native input events and attributes are forwarded to the underlying <input>. |