Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA segmented length-of-time input for days, hours, minutes and seconds that reads and writes ISO 8601 durations such as PT1H30M.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for an estimate, a timer length, a cache lifetime or a task duration: a length of time, not a moment. The value is an ISO 8601 duration, which APIs and calendars understand.
For a start-to-end pair use time-range-field.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | null | null | ISO duration, e.g. PT2H15M, P1DT3H. |
| onValueChange | (iso: string | null, seconds: number | null) => void | - | Called with the duration, or null while empty. |
| units | (days | hours | minutes | seconds)[] | [hours, minutes] | Units shown, largest first. Hidden larger units fold into the largest shown. |
| min / max | number | - | Shortest and longest total, in seconds. |
| step | number | 1 | Step of Up and Down on the smallest unit. |
| label / name | string | Duration / - | Accessible name and hidden input name. |
| Keys | Action |
|---|---|
| 0-9 | Types into the focused unit and moves on when it is complete |
| Up / Down | Steps the unit and wraps; the smallest unit steps by step |
| Page Up / Page Down | Steps 7 days, 4 hours or 10 minutes and seconds |
| Home / End / Backspace | Smallest value, largest value, clear |
| Left / Right | Moves between units |
spinbutton named "hours", "minutes" and so on, inside a group.min and max (in seconds) sets aria-invalid on the units.parseISODuration, formatISODuration and formatDuration(d, locale) in date-time-core convert and print durations.