TimeClock
v1.0.7Updated 27 Aug 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 · 10 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
- ✕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
—