KQ-498 · TIME/DIAL

Time Dial

A clock face for picking a time. Tapping or dragging the ring swings the hand to that hour on snap, by the shortest arc, then the face cross-fades to minutes and the hand glides across to the new scale while the readout rolls the digits that changed. Arrows step the phase you are in, Enter advances hour to minute to done, Escape steps back, and the face reports as a slider whose value text reads the whole time.

KQ-498 · TIME/DIAL

Enter advances hour to minute to done. Escape steps back.

Dispatch window opens 08:15 · picking hour

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/time-dial

Props

value / defaultValue: string; default "09:30"; The time as "HH:mm" in 24-hour form, controlled or initial.
onValueChange: (value: string) => void; default —; Fires on every change, always "HH:mm" in 24-hour form.
format: 12 | 24; default 12; Face and readout style; 24 puts 00–11 on the outer band and 12–23 on the inner one instead of an AM/PM segment.
minuteStep: number; default 5; Minute detent for the face and the arrow keys.
label: string; default "Time"; Group label; the face and the meridiem group are named from it.
onPhaseChange: (phase: "hour" | "minute" | "done") => void; default —; Fires when the dial moves between hour, minute and done.

Prop	Type	Default	Description
value / defaultValue	string	"09:30"	The time as "HH:mm" in 24-hour form, controlled or initial.
onValueChange	(value: string) => void	—	Fires on every change, always "HH:mm" in 24-hour form.
format	12 \| 24	12	Face and readout style; 24 puts 00–11 on the outer band and 12–23 on the inner one instead of an AM/PM segment.
minuteStep	number	5	Minute detent for the face and the arrow keys.
label	string	"Time"	Group label; the face and the meridiem group are named from it.
onPhaseChange	(phase: "hour" \| "minute" \| "done") => void	—	Fires when the dial moves between hour, minute and done.