Number pad
Amount and PIN keypad with pressable keycaps, rolling currency display, hold-to-clear delete, PIN dot slots with shake on a wrong code, and keyboard input.
Preview
Send to Mira AlvarezBalance $1,240.18
Amount: $48.50
Enter your 4-digit PIN
0 of 4 digits entered
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "amount" | "pin" | "amount" | Money amount with a decimal key, or a PIN with dot slots. |
| label | string | — | Accessible name of the keypad. |
| value | string | — | Controlled entry as a digit string. |
| defaultValue | string | "" | Initial entry when uncontrolled. |
| onValueChange | (value: string) => void | — | Called on every key. |
| maxLength | number | 4 (pin) / 6 | PIN length, or most whole-number digits. |
| currency | string | "USD" | Amount currency code. |
| max | number | Infinity | Largest allowed amount. |
| verify | (pin: string) => boolean | — | PIN: called when full; return true to accept. |
| errorMessage | string | "Wrong code. Try again." | Shown when verify rejects. |
| successMessage | string | "Unlocked" | Shown when verify accepts. |
| holdToClear | number | 650 | Hold time in ms for delete to clear everything. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.