# VirtualInput <Experimental></Experimental>

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/virtual-input
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Consistent with the appearance and usage of the Input input box.

## Install

```bash
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` | - |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt