Time Picker
Segmented hour/minute input built on reka-ui's TimeFieldRoot. Value is a Time instance from @internationalized/date.
Default
24-hour input with hour and minute segments. Bind to a Time value.
Hour cycle
hourCycle accepts 12 or 24. The 12-hour variant adds an AM/PM segment whose literal can differ between Node and browser ICU, so wrap usage in ClientOnly to avoid hydration warnings.
Granularity
Control the smallest segment: hour, minute (default), or second.
Step
Pass a step object (e.g. { minute: 15 }) to snap segment increments.
Clearable
Set clearable to show a clear button once a value is selected.
Disabled & read-only
disabled blocks all input; readonly shows the value but prevents edits.
API Reference
Props, events, and slots for each sub-component.
TimePicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | Time | null | undefined | — | Time value from @internationalized/date. Use new Time(hour, minute). Supports v-model. |
| hourCycle | 12 | 24 | 24 | Display 12- or 24-hour format. |
| granularity | "hour" | "minute" | "second" | "minute" | Smallest segment shown. |
| step | { hour?: number, minute?: number, second?: number } | — | Increment applied per segment when stepping with arrows. |
| locale | string | "en-US" | BCP 47 locale for formatting. |
| disabled | boolean | false | Disable input. |
| readonly | boolean | false | Make the field read-only. |
| clearable | boolean | false | Show a clear button when a value is set. |
| showCaret | boolean | false | Show a blinking caret on the focused segment. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires with the new Time (or null). Enables v-model. |
TimePickerInput
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Single editable segment. Forwards to reka-ui TimeFieldInput; usually rendered for you by TimePicker. |