opinion
NumberKeyboard
An on-screen numeric keypad in a bottom sheet, for PINs and amounts.
Unlock TidelineFour digits, keys shuffled each time it opens
----
Nothing typed
Nothing typed
Nothing typed
In context
On a phonePIN lock, and an amount entry for an expense
Unlock Tideline
Crew inbox is locked on this phone.
Enter your PIN
Log expense
Quay Marine Supplies
£1,240
Nothing typed
Props
| Prop | Type | Required | Default |
|---|---|---|---|
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | false |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
title | ReactNode | No | — |
onInput | (digit: string) => void | Yes | — |
onDelete | () => void | Yes | — |
onConfirm | (() => void) | undefined | No | — |
confirmLabel | string | undefined | No | — |
customKey | string | undefined | No | — |
randomOrder | boolean | undefined | No | false |
closeOnConfirm | boolean | undefined | No | true |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="number-keyboard" on the keypad grid (the sheet itself carries BottomSheet's own data-rebar-component="bottom-sheet"); parts: key, custom-key, delete-key, confirm.
Migrating to Ant Design
Not codemod-covered — the antd-mobile pattern, no direct AntD desktop equivalent (a desktop form just uses the browser's own numeric input).