build69
build69  /  Components  /  Date & Time  /  MultiSectionDigitalClock

MultiSectionDigitalClock

v1.0.3Updated 28 Sept 2026

Side-by-side scrollable columns for hours, minutes and either AM/PM or seconds, the MUI MultiSectionDigitalClock equivalent. The `views` prop chooses which columns render and in what order, while minutesStep and secondsStep control each column's granularity. Every column is its own accessible listbox with keyboard support and auto-scrolls its selected value into view.

View source← Back to catalog

Preview

Live · 7 stories
Multi SectionOpen ↗
▸Why this is recommendedtimepickerclockdigital+8

MultiSectionDigitalClock handling multiple items at once — section.

Recommended for+14
  • ✓Setting an exact time down to the second
  • ✓Choosing a precise alarm or reminder time
  • ✓Entering hours and minutes separately in a form
  • ✓Time entry in a 24-hour operations console
  • ✓The dropdown panel inside a time picker popover
Tags+6
timepickerclockdigitalcolumnshoursminutessecondsmeridiemmuimultisection
Features+4
  • Hours / minutes / meridiem or seconds columns
  • `views` selects which columns render, in order
  • 12-hour (AM/PM) and 24-hour modes via `ampm`
  • minutesStep / secondsStep column granularity
  • Controlled (`value`) and uncontrolled (`defaultValue`) modes
  • Each column is an accessible listbox (role=listbox / option / aria-selected)
  • Columns sit in one role=group that a FormField label names (aria-labelledby), with the field id, describedby and invalid state reaching it
  • 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 from preset time slots at a fixed interval (use DigitalClock)
  • ✕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: "MultiSectionDigitalClock" })

Usage

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

<MultiSectionDigitalClock
  value={time}
  onChange={setTime}
  ampm={false}
  views={['hours', 'minutes', 'seconds']}
  minutesStep={5}
/>

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—
ampm

12-hour columns with a meridiem list (default true) vs 24-hour

boolean—
minutesStep

Minutes column granularity (default 1)

number—
secondsStep

Seconds column granularity (default 1)

number—
views

Columns to render, in order. Defaults derived from `ampm`

('hours' | 'minutes' | 'seconds' | 'meridiem')[]—
maxHeight

Max scrollable height in px (default 256)

number—
disabled

Disable all columns

boolean—
className

Extra classes on the wrapper

string—
labels

Override the built-in column aria-labels and the AM/PM option text (i18n)

Partial<MultiSectionDigitalClockLabels>—
aria-label

Accessible name of the clock as a whole (its role=group); unnamed by default, and inside a labelled FormField the field label names it instead

string—
aria-labelledby

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

string—
id

DOM id set on the group around the columns; FormField clones its field id in

string—
aria-describedby

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

string—
aria-invalid

Mark the clock invalid; set on the group and on every column listbox (FormField clones this in from its error prop)

boolean—

Related

Platform docsAll componentsSource files