Rotary Dial
A rotary phone dial for entering digits: drag a finger hole clockwise to the stop and release so it springs back and enters the digit, with keyboard digits, arrow-key hole picking and a display with backspace.
Preview
How to dial
Put a finger in a hole, drag it clockwise to the stop and let go.
- Dial a digit 0–9
- Pick a hole←→
- Dial the picked hole Enter
- Delete ⌫
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string / string / (value) => void | — / "" / — | The dialled digits, controlled or uncontrolled. |
| onDigit | (digit: string) => void | — | Each digit as it's dialled. |
| maxLength | number | 12 | Stop accepting digits after this many. |
| placeholder | string | "Dial a number" | Display text when empty. |
| size | number | 240 | Dial diameter in px. |
| format | (value: string) => string | identity | Format the display, e.g. group digits. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.