A field with one segment for hours, minutes, optional seconds and AM or PM. The value is always a 24 hour string such as 13:05 or 13:05:09, even on the 12 hour clock.
Type the digits and the focus moves to the next segment. Arrow Up and Down change the number.
Add the seconds segment with withSeconds.
Use format="12h" to show an AM or PM select. onChange still receives the 24 hour value.
Set how much Arrow Up and Down change each segment.
onChange runs when the time is complete, and with an empty string when every segment is cleared. It does not run while the time is half typed.
Use filled, light, ghost or subtle with a type, as in the other fields.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | time as HH:mm or HH:mm:ss, to control the component | string | - | - |
| initialValue | time at the start | string | - | '' |
| onChange | called with the 24 hour time once it is complete | (value: string) => void | - | - |
| withSeconds | show the seconds segment | boolean | - | false |
| format | clock shown | string | '12h', '24h' | 24h |
| hoursStep | change of the hours with the arrow keys | number | - | 1 |
| minutesStep | change of the minutes with the arrow keys | number | - | 1 |
| secondsStep | change of the seconds with the arrow keys | number | - | 1 |
| hoursLabel | accessible name of the hours segment | string | - | Hours |
| minutesLabel | accessible name of the minutes segment | string | - | Minutes |
| secondsLabel | accessible name of the seconds segment | string | - | Seconds |
| amPmLabel | accessible name of the AM or PM select | string | - | AM or PM |
| amPmLabels | text of the AM and PM options | { am: string; pm: string } | - | AM, PM |
| disabled | disable the component | boolean | - | false |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'id', 'className', ... | - |
The ref points at the root div, which has role="group".
The root is a group: name it with aria-label or aria-labelledby. Each segment is its own input with a name from hoursLabel, minutesLabel and secondsLabel, and the AM or PM select has amPmLabel.
| Key | Action |
|---|---|
| 0 to 9 | Type the segment, then move to the next one when it is full |
| Arrow Up and Down | Raise and lower the segment by its step, wrapping around |
| Arrow Left and Right | Move to the previous and next segment at the edge of the text |
| Backspace | On an empty segment, move to the previous one |