Input

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 when type is text, search, url, tel, email, 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

<Input placeholder="please input content" />

Example

Basic usage of Input component.

API

PropertiesDescriptionTypeDefault
idThe id of the input element, usually used with labelstring-
valueThe input valuestring-
defaultValueThe default valuestring-
placeholderThe prompt textstring-
disabledWhether it is disabled or notbooleanfalse
readOnlyWhether it is readonly or notbooleanfalse
clearableWhether to enable the clear icon, the input box will be cleared after clicking the clear iconbooleanfalse
minThe minimum value, only valid when type is numbernumber-
maxThe maximum value, only valid when type is numbernumber-
onlyShowClearWhenFocusIf 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.booleantrue
onChangeTriggered when the input content is changed(value: string) => void-
onClearTriggered after clicking the clear button() => void-
onEnterKeyPressThe callback when Enter key is pressed(e: React.KeyboardEvent<HTMLInputElement>) => void-
ON THIS PAGE