VirtualInput <Experimental></Experimental>
Consistent with the appearance and usage of the Input input box.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Consistent with the appearance and usage of the Input input box.
When to Use
When you need to use it with the virtual keyboard.
Demos
VirtualInput
Props
| Name | Description | Type | Default |
|---|---|---|---|
| clearable | Whether to enable the clear icon, the virtual input box will be cleared after clicking the clear icon | boolean | false |
| onBlur | Triggered when element lose focus | () => void | - |
| onClear | Trigger when clear button clicked | () => void | - |
| onClick | Triggered when element get clicked | (e: React.MouseEvent<HTMLDivElement>) => void | - |
| onFocus | Triggered when element get focus | () => void | - |
| placeholder | The placeholder text | string | - |
| value | The input value | string | '' |
| cursor | Cursor related configuration, movable indicates whether it can be adjusted, onMove is the cursor movement callback | { movable?: boolean; onMove?: (position: number) => void } | { movable: false } |
Strictly speaking, VirtualInput is not a form field component. It just displays the data.
Ref
| Name | Description | Type |
|---|---|---|
| blur | Let the input box lose focus | () => void |
| focus | Let the input box get focus | () => void |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --caret-color | The color of caret. | var(--adm-color-primary) | --adm-virtual-input-caret-color |
| --caret-width | The width of caret. | 2px | --adm-virtual-input-caret-width |
| --color | Text color. | var(--adm-color-text) | - |
| --disabled-color | Text color when disabled. | var(--adm-color-weak) | - |
| --font-size | Text font size. | 17px | - |
| --placeholder-color | Placeholder text color. | var(--adm-color-light) | - |
| --text-align | The alignment of text. | left | - |