build69
Sign inGet API key
build69  /  Components  /  Date & Time  /  DigitalClock

DigitalClock

v1.0.2Updated 20 Jul 2026

Scrollable digital time-list pickers (MUI DigitalClock / MultiSectionDigitalClock equivalents). DigitalClock renders one scrollable column of times at a fixed interval; MultiSectionDigitalClock renders hours | minutes |

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedtimepickerclockdigital+5

The default, out-of-the-box DigitalClock.

Recommended for+14
  • ✓Selecting from preset appointment slots
  • ✓Booking a table or a salon appointment
  • ✓Restricting time entry to business hours
  • ✓Choosing a delivery time window
  • ✓Compact single-column time entry in a popover
Tags+6
timepickerclockdigitallistscrollslotmuidefault
Features+4
  • Single scrollable column of times at a fixed timeStep
  • 12-hour (AM/PM) and 24-hour labels via `ampm`
  • minTime / maxTime range renders out-of-range slots disabled
  • skipDisabled omits out-of-range options entirely
  • Controlled (`value`) and uncontrolled (`defaultValue`) modes
  • Accessible listbox (role=listbox / option / aria-selected / aria-activedescendant)
  • Keyboard: ArrowUp/ArrowDown/Home/End to move, Enter/Space to select
  • Auto-scrolls the selected option into view
  • maxHeight to cap the scroll area
Not recommended for−2
  • ✕Picking an exact time down to the minute or second (use MultiSectionDigitalClock)
  • ✕Analog-style picking (use TimeClock)
  • ✕Date selection (use DatePicker)
  • ✕A text time field with a popover (use TimePicker)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "DigitalClock" })

Usage

import { DigitalClock } from '@/components/inputs/digital-clock';

<DigitalClock
  value={time}
  onChange={setTime}
  timeStep={15}
  minTime={dayAt(9, 0)}
  maxTime={dayAt(17, 0)}
/>

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

PropTypeRequired
value

Controlled value

Date | null—
onChange

Fired on selection

(date: Date) => void—
defaultValue

Initial value when uncontrolled

Date | null—
timeStep

Interval between options in minutes (default 30)

number—
ampm

12-hour labels (default true) vs 24-hour

boolean—
minTime

Disable options before this time-of-day

Date—
maxTime

Disable options after this time-of-day

Date—
skipDisabled

Omit disabled options entirely instead of dimming them

boolean—
maxHeight

Max scrollable height in px (default 256)

number—
disabled

Disable the whole list

boolean—
className

Extra classes on the wrapper

string—

Related

Platform docsAll componentsSource files