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

TimePicker

v1.0.8Updated 27 Aug 2026

Time field with free-text parsing plus a popover digital-clock panel (composes MultiSectionDigitalClock). Type "9:30", "1:45 pm" or "18:20:05" and it parses/validates live — invalid or out-of-range text shows the error s

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedtimepickerinputfield+5

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

Recommended for+14
  • ✓Opening / closing hours fields
  • ✓Appointment and delivery-slot times
  • ✓Shift start / end fields in rosters
  • ✓Any form needing a typed + picked time
Tags+6
timepickerinputfieldpopoverclockcomboboxformdefault
Features+4
  • Free typing with lenient parsing ("9.30", "1:45 pm", "18:20:05")
  • Live validation — invalid / out-of-range text shows the error ring, valid input commits immediately
  • Popover panel composes MultiSectionDigitalClock (hours | minutes | seconds | AM-PM listboxes)
  • Controlled (value / onValueChange) + uncontrolled (defaultValue)
  • Canonical 24-hour value (HH:mm, or HH:mm:ss with withSeconds); null when cleared
  • 12-hour display (hour12) while still emitting 24-hour values
  • minTime / maxTime range — typed values validate, panel picks and stepping clamp into range
  • minuteStep granularity for the minutes listbox and arrow stepping
  • Keyboard: ArrowUp/Down step minutes, PageUp/Down step hours, Alt+ArrowDown opens the panel, arrows also step the focused panel column
  • Sizes sm / md / lg, clearable ×, disabled and error states
  • Hidden input carries the canonical value when name is set (form posts)
  • i18n: labels prop overrides clear/trigger aria-labels and the 12-hour AM/PM display strings
Not recommended for−2
  • ✕Picking from a single preset slot list (use DigitalClock)
  • ✕Analog-style picking (use TimeClock)
  • ✕Combined date + time (use DateTimePicker)

Install

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

get_registry_item({ name: "TimePicker" })

Usage

import { TimePicker } from '@/components/inputs/time-picker';

<TimePicker value={time} onValueChange={setTime} hour12 minuteStep={15} minTime="08:00" maxTime="20:00" clearable />

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 canonical value 'HH:mm' / 'HH:mm:ss'; null or '' = empty

string | null—
defaultValue

Uncontrolled initial value

string—
onValueChange

Fired with the canonical 24-hour string, or null when cleared

(value: string | null) => void—
hour12

12-hour AM/PM display + panel (emitted value stays 24-hour)

boolean—
minTime

Earliest allowed time-of-day, e.g. '08:00'

string—
maxTime

Latest allowed time-of-day, e.g. '20:30'

string—
minuteStep

Minutes listbox / arrow-stepping granularity (default 1)

number—
withSeconds

Adds a seconds column and emits 'HH:mm:ss'

boolean—
disabled

Disable the field

boolean—
error

Force the error appearance regardless of parse state

boolean—
size

Field size (default md)

'sm' | 'md' | 'lg'—
clearable

Show a clear (×) button when a value is set

boolean—
placeholder

Defaults to the active format mask (HH:mm, hh:mm AM, …)

string—
name

Renders a hidden input with the canonical value for form posts

string—
align

Popover alignment relative to the field

'start' | 'center' | 'end'—
labels

Override built-in UI strings (i18n)

Partial<TimePickerLabels>—

Related

Platform docsAll componentsSource files