Clock Face Picker

ProNew

An analogue clock face for picking a time: hours first, then minutes, by tap, drag or arrow keys, with an inner ring for 24-hour clocks.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Use it in touch-first flows where a dial is friendlier than typing: setting an alarm, a reminder, a pickup time. Drag gives one-minute precision.

On desktop forms time-field is faster; for a drum on phones see wheel-picker.


pnpm dlx shadcn@latest add @tealmac-pro/clock-face-picker

Prop	Type	Default	Description
value / defaultValue	string \| null	null	`HH:mm`.
onValueChange	`(value: string \| null) => void`	-	Called on every pick.
hourCycle	12 \| 24	from locale	24 shows an inner ring for 13 to 00.
minuteStep	number	1	Snap of dragging and arrow keys.
autoAdvance	boolean	true	Switch to minutes after an hour.
min / max	string	-	Disable times outside.
locale / label / disabled	-	-	AM/PM labels, name, disabled state.

Keys	Action
Arrow keys	Step the focused face by one hour or one `minuteStep`
Tab	Hour and minute buttons, AM/PM, then the face
Click or drag on the face	Picks the nearest number; releasing an hour moves on to minutes

The face is a radiogroup named "Hour" or "Minute" whose numbers are radio buttons ("3 o'clock", "45 minutes"); the hand is aria-hidden.
The large hour and minute readout are buttons with aria-pressed that switch the face; AM and PM is a separate radiogroup.
Times outside min and max are disabled. Nothing depends on the drag: every value is reachable with the numbers or the arrow keys.

Guide and examples

Use it in touch-first flows where a dial is friendlier than typing: setting an alarm, a reminder, a pickup time. Drag gives one-minute precision.

On desktop forms time-field is faster; for a drum on phones see wheel-picker.


pnpm dlx shadcn@latest add @tealmac-pro/clock-face-picker

Prop	Type	Default	Description
value / defaultValue	string \| null	null	`HH:mm`.
onValueChange	`(value: string \| null) => void`	-	Called on every pick.
hourCycle	12 \| 24	from locale	24 shows an inner ring for 13 to 00.
minuteStep	number	1	Snap of dragging and arrow keys.
autoAdvance	boolean	true	Switch to minutes after an hour.
min / max	string	-	Disable times outside.
locale / label / disabled	-	-	AM/PM labels, name, disabled state.

Keys	Action
Arrow keys	Step the focused face by one hour or one `minuteStep`
Tab	Hour and minute buttons, AM/PM, then the face
Click or drag on the face	Picks the nearest number; releasing an hour moves on to minutes

The face is a radiogroup named "Hour" or "Minute" whose numbers are radio buttons ("3 o'clock", "45 minutes"); the hand is aria-hidden.
The large hour and minute readout are buttons with aria-pressed that switch the face; AM and PM is a separate radiogroup.
Times outside min and max are disabled. Nothing depends on the drag: every value is reachable with the numbers or the arrow keys.