TimePicker
A button trigger opens a dialog with two listboxes, Hour (00–23) and Minute (00–59). Choosing both parts commits a"HH:MM" value to a hidden input and dispatches anink:time:change event.
Example
Hour
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Minute
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
<TimePicker
id="meeting"
label="Meeting time"
name="meeting"
/>Click or Enter an hour, then a minute: once both parts are set the value commits ("14:30"), the dialog closes, and focus returns to the trigger. Changing either part afterwards recommits the new time immediately. "Now" fills the current time;"Clear" empties the value.
Preselected value
Hour
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Minute
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
<TimePicker
id="standup"
label="Standup time"
name="standup"
value="09:00"
/>A value in "HH:MM" 24-hour form preselects both columns and shows on the trigger. Malformed values select nothing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Required. Names Field/panel/message ids (trigger itself carries no id). |
label | string | - | Visible label; kept in the trigger name and dialog name. |
name | string | id | Hidden-input form name; carries the "HH:MM" value. |
value | string ("HH:MM") | - | Preselected time; malformed values select nothing. |
hideValue | boolean | false | Skips the hidden input; composition API for a combined date-time field, which owns the value. |
hint | string | - | Help text below the trigger. |
error | string | - | Error message; sets aria-invalid on the trigger. |
required | boolean | false | Marks the label required. |
disabled | boolean | false | Non-interactive; trigger cannot open. |
class | string | - | Style passthrough. |
Accessibility
- Trigger keeps the label in its accessible name, with
aria-haspopup="dialog",aria-expanded,aria-controls. - Panel is a
dialognamed"{label} options"holding two labelled listboxes ("Hour","Minute") withrole="option"items andaria-selected. - Keyboard per column (roving tabindex): Left/Right ±1, Up/Down ±column width (4 for hours, 6 for minutes), Home/End first/last, Enter/Space picks the focused part. Tab order: Hour option → Minute option → Now → Clear.
- Escape closes and refocuses the trigger; clicking outside closes.
- Hint and error connect via
aria-describedby; error setsaria-invalid="true"on the trigger. - Commit, Now, and Clear dispatch
ink:time:changewith{ value }("HH:MM", empty when cleared).