Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA segmented time input with hour, minute, optional second and a day period for 12-hour locales, typed or stepped from the keyboard, with an HH:mm value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a start time, a reminder time or an opening hour that a person types. It follows the 12 or 24 hour clock of the locale and gives a plain HH:mm string.
For a wheel on a phone use wheel-picker; to choose from fixed offered times use time-slot-picker.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | null | - | Controlled HH:mm (HH:mm:ss with seconds), or null. |
| defaultValue | string | null | null | Initial value when uncontrolled. |
| onValueChange | (value: string | null) => void | - | Called with a complete time, or null while a segment is empty. |
| min / max | string | - | Earliest and latest allowed time; outside values are invalid. |
| granularity | hour | minute | second | "minute" | Smallest unit shown. |
| hourCycle | 12 | 24 | from locale | Force the clock. |
| minuteStep | number | 1 | Step of Up and Down on the minute segment. |
| locale | string | browser | Sets the day period labels and the clock. |
| label | string | "Time" | Accessible name. |
| name | string | - | Adds a hidden input with the value. |
| disabled / readOnly / invalid | boolean | false | Field states. |
| Keys | Action |
|---|---|
| 0-9 | Types into the focused segment and moves on when it is complete |
| a / p | Sets AM or PM on the day period segment (the first letters of the locale's labels) |
| Up / Down | Steps the segment, by minuteStep on minutes, and wraps around |
| Page Up / Page Down | Steps 3 hours or 10 minutes or seconds |
| Home / End | Jumps to the smallest or largest value |
| Backspace / Delete | Removes the last typed digit, then clears the segment |
| Left / Right | Moves between segments (reversed in right-to-left text) |
spinbutton with value limits and an aria-valuetext; the day period reads "AM" or "PM" rather than 0 or 1.label; a value outside min and max sets aria-invalid.contenteditable with inputmode="numeric".p or the arrows.00:xx and 12 PM is 12:xx.