build69
build69  /  Components  /  Date & Time  /  DigitalClock

DigitalClock

v1.0.4Updated 28 Sept 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 · 10 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
  • Labelled by FormField: the listbox takes the id and is named by the field label through aria-labelledby; the built-in "Select time" name steps aside
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—
aria-label

Accessible name of the listbox; defaults to labels.ariaLabel ("Select time") except inside a labelled FormField

string—
aria-labelledby

Id(s) of the element(s) that label the listbox; wins over a FormField label

string—
id

DOM id set on the focusable listbox; FormField clones its field id in, and its label then names the control

string—
aria-describedby

Id(s) of hint or error text describing the listbox (FormField clones this in)

string—
aria-invalid

Mark the listbox invalid; FormField clones this in from its error prop

boolean—
aria-required

Mark the listbox required; FormField clones this in from its required prop

boolean—

Related

Platform docsAll componentsSource files