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
,maxlength
only takes effect whentype
istext
,search
,url
,tel
,password
.If you need to limit the number type to the input box, you can pass the
max/min
prop.In addition, the following native attributes are supported:
maxLength
minLength
max
min
autoComplete
autoFocus
enterKeyHint
pattern
inputMode
type
onFocus
onBlur
autoCapitalize
autoCorrect
onKeyDown
onKeyUp
onCompositionStart
onCompositionEnd
onClick
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 | - |