Duration input
A duration field with h/m/s spinbutton segments that step and roll over, a free-text parser for entries like 1h 30m or 90m, and preset chips; outputs seconds.
Preview
Focus block
01hr
30min
1 h 30 minOutput: 5400 seconds
Clip length
00hr
01min
35sec
1 min 35 sOutput: 95 seconds
Disabled
00hr
30min
00sec
30 minInstall
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled duration in seconds. |
| defaultValue | number | 0 | Uncontrolled starting duration in seconds. |
| onValueChange | (seconds: number) => void | — | Called on steps, typing, free text and presets. |
| showSeconds | boolean | true | Show the seconds segment. |
| maxHours | number | 99 | Upper bound for the hours segment. |
| presets | number[] | [900, 1800, 2700, 3600, 5400, 7200] | Preset chips in seconds; [] hides them. |
| freeText | boolean | true | Show the free-text entry with live parsing. |
| label | string | "Duration" | Visible label naming the segment group. |
| disabled | boolean | false | Disables every part. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.