The Input component is layout-independent, that means it only includes the most basic input box part. If you want to add borders, titles, or some operation buttons with it, you can combine with the List or Form components.
In native
input,maxlengthonly takes effect whentypeistext,search,url,tel,password.If you need to limit the number type to the input box, you can pass the
max/minprop.In addition, the following native attributes are supported:
maxLengthminLengthmaxminautoCompleteautoFocusenterKeyHintpatterninputModetypeonFocusonBlurautoCapitalizeautoCorrectonKeyDownonKeyUponCompositionStartonCompositionEndonClick
<Input placeholder="please input content" /><Input placeholder="please input content" />Basic usage of Input component.
| Properties | Description | Type | Default |
|---|---|---|---|
| id | The id of the input element, usually used with label | string | - |
| value | The input value | string | - |
| defaultValue | The default value | string | - |
| placeholder | The prompt text | string | - |
| disabled | Whether it is disabled or not | boolean | false |
| readOnly | Whether it is readonly or not | boolean | false |
| clearable | Whether to enable the clear icon, the input box will be cleared after clicking the clear icon | boolean | false |
| min | The minimum value, only valid when type is number | number | - |
| max | The maximum value, only valid when type is number | number | - |
| onlyShowClearWhenFocus | If true, the clear button will only be displayed when the input box is focused. If false, the clear button will still be displayed after the input box loses focus. | boolean | true |
| onChange | Triggered when the input content is changed | (value: string) => void | - |
| onClear | Triggered after clicking the clear button | () => void | - |
| onEnterKeyPress | The callback when Enter key is pressed | (e: React.KeyboardEvent<HTMLInputElement>) => void | - |