# NumberKeyboard <Experimental></Experimental>

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

Numeric keypad panel.

## 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.

Numeric keypad panel.

## When to Use

Applicable when entering numeric content.

Can be used with password input box component or custom input box component

If possible, we recommend using the native keyboard provided by the system or client. The virtual numeric keypad is just a supplement for some special scenarios.

## Demos

tips: It is recommended to open the demo on the mobile side for better preview effect, because the touch event used by the component cannot be seen on the web side.

## NumberKeyboard

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| afterClose | Callback when the keyboard is completely put away | `() => void` | - |
| afterShow | Callback when the keyboard is completely bounced | `() => void` | - |
| closeOnConfirm | Whether to automatically close when the ok button is clicked | `boolean` | `true` |
| confirmText | The text of the confirm button, if `null` is set, it would be shown | `string \| null` | `null` |
| customKey | Customized button | `string \| { key: string; title: string } \| (string \| { key: string; title: string })[]` | - |
| destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
| forceRender | Render content forcely | `boolean` | `false` |
| getContainer | To get the specified mounted HTML node, the default is `body`, if `null` returned, it would be rendered to the current node | `HTMLElement \| () => HTMLElement \| null` | `() => document.body` |
| onClose | Triggered when it is clicked | `() => void` | - |
| onConfirm | Triggered when the ok button is clicked | `() => void` | - |
| onDelete | Callback when the content is deleted | `() => void` | - |
| onInput | Callback when the input content is changed | `(v: string) => void` | - |
| randomOrder | Whether the keyboard is out of order | `boolean` | `false` |
| safeArea | Whether to enable safe area padding | `boolean` | `true` |
| showCloseButton | Whether to show the collapsed keyboard arrow | `boolean` | `true` |
| title | The title of the keyboard | `string` | - |
| visible | Whether to show or hide | `boolean` | - |

In addition, the following attributes of [Popup](/components/popup) are supported: `stopPropagation`

## FAQ

### Does the NumberKeyboard support automatic reading of verification codes from SMS?

No.

---

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