Time Picker
Selects a precise local time with stepped controls and canonical form values.
@rivetui/time-pickerPreview
Explore each composition interactively, then open its code in the same context.
Default
Use the compact 24-hour picker for scheduling without a separate confirmation step.
Note
Omit value and defaultValue for an empty picker. Values use HH:mm or HH:mm:ss when seconds are enabled.
Scheduled for 14:30.
Formats
Switch to a 12-hour clock or add seconds only when the workflow requires that precision.
Form states
Empty, invalid, and disabled states follow the same semantics as other Rivet controls.
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/time-pickerPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
| Prop | Type | Default |
|---|---|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string | undefined) => void | — |
hourCycle | 12 | 24 | 24 |
showSeconds | boolean | false |
minuteStep | number | 1 |
secondStep | number | 1 |
placeholder | string | "Select time" |
name | string | — |
open | boolean | — |
defaultOpen | boolean | false |
onOpenChange | (open: boolean, details) => void | — |
disabled | boolean | false |