Input
Input component specifies an field where the user can enter data.
Basic
The most basic usage of Input.
Sizes
There's three sizes of option for Input field.
Disabled
Disabled Input.
Affix
Input can have
suffix or prefix content inside. $
.00
Password Visible
Example of controlling the Input type via prefix icon.
Textarea
Turn Input field to textarea by setting
textarea prop to true.Invalid
Display Input as invalid status when
invalid prop is set to true.Controlled Input
Controlled Input example.
API
Input
| Prop | Description | Type | Default |
|---|---|---|---|
| disabled | Whether the Input is disabled | boolean | - |
| invalid | Whether the Input is invalid status | boolean | - |
| onBlur | Callback when Input remove focus | (e: MouseEvent) => void | - |
| onChange | Callback when Input value changed | (e: MouseEvent) => void | - |
| onFocus | Callback when Input is focused | (e: MouseEvent) => void | - |
| prefix | Render a prefix content inside Input | string | ReactNode | - |
| size | Input size | 'lg' | 'md' | 'sm' | 'md' |
| suffix | Render a suffix content inside Input | string | ReactNode | - |
| textArea | Whether to turn Input into textarea field | boolean | - |
| type | Input type, refer to MDN for available types | string | 'text' |
| unstyle | Whether to remove input default style | boolean | false |