TimeClock
v1.0.16Updated 19 Oct 2026Analog clock-face time picker (MUI TimeClock equivalent). A round face where the user clicks a number to pick hours, then minutes — the classic two-step interaction. Supports 12h (AM/PM) and 24h (two concentric rings), o
Preview
Live · 11 stories▸Why this is recommendedtimepickerclockanalog+4
The default, out-of-the-box TimeClock.
- ✓Touch-friendly time entry
- ✓Appointment / meeting time pickers
- ✓Settings where an analog clock reads naturally
- Analog clock face with selectable numbers + pointing hand
- Two-step hour → minute flow with auto-advance
- 12-hour mode with AM/PM toggle
- 24-hour mode with inner / outer ring (00..23)
- Optional seconds view
- minutesStep granularity
- Controlled or uncontrolled value + controlled view
- Keyboard increment / decrement (arrows / PageUp / PageDown)
- Disabled / readOnly states
- Labelled by FormField: the clock face (role=slider) takes the id and is named by the field label; the active view ("Select hours") moves into its description
- ✕Fast keyboard-only entry of precise times (use a text time field)
- ✕Date selection (use DatePicker)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueControlled value
—onChangeFired on hours / minutes / seconds change
—defaultValueUncontrolled initial value
—ampm12-hour with AM/PM (default true) vs 24-hour
—minutesStepGranularity of the minutes view
—viewControlled active view
—onViewChangeFired when the active view changes
—viewsAvailable views in order
—disabledDisable interaction
—readOnlyRead-only (no value changes)
—sizeClock-face diameter in px
—aria-labelAccessible name of the clock face; without it the face is named after the active view, except inside a labelled FormField
—aria-labelledbyId(s) of the element(s) that label the clock face; wins over a FormField label
—idDOM id set on the focusable clock face; FormField clones its field id in, and its label then names the control
—aria-describedbyId(s) of hint or error text describing the clock face (FormField clones this in)
—aria-invalidMark the clock face invalid; FormField clones this in from its error prop
—aria-requiredMark the clock face required; FormField clones this in from its required prop
—