TimePicker
ImplementedTypeable time combobox over a 15-minute grid (separate from date). Used for event start time, doors time, and any range with min/max. E11-INTK-1 rewrite — the list opens on click/focus and the field accepts free text (`7:30 pm`, `1930`, `19:30` all normalise to `19:30`). Out-of-range options are GREYED rather than hidden so the producer sees the constraint.
patterns/molecules/timepicker.htmlTimePicker component.
TimePicker
design-system
TimePicker component preview and API reference.
Props
TimePicker
valuestring—Selected time in `HH:MM` (24h) — controlled.
onChange(value: string) => void—Time change handler — omitted renders a read-only field.
format'12' | '24''24'Display format. Values are stored in 24h `HH:MM` regardless.
disabledbooleanfalseDisabled state — closes the list and blocks typing.
labelstring—Visible field label.
ariaLabelstring—Override the input's aria-label (falls back to `label`).
classNamestring—Extra classes for the outer wrapper.
idstring—Explicit id (otherwise auto-generated via React.useId).
minstring | null—Earliest selectable time (`HH:MM`). Out-of-range options greyed; typed values outside the range are still accepted — validation belongs to the form.
maxstring | null—Latest selectable time (`HH:MM`). Same greyed-not-hidden semantics as `min`.
stepMinutesnumber15Minutes between offered options.
placeholderstring—Shown when the field is empty.
<TimePicker />Accessibility
ARIA
2 rulesvalidation
1 ruleKeyboard
1 rulea11y
1 ruleUsage
Import
import { TimePicker } from "@epasslive/design-system"Example 1
<TimePicker label='Doors' value={value} onChange={setValue} />Example 2
<TimePicker label="Ends" value={value} onChange={setValue} min={startsAt} />Example 3
<TimePicker value={value} onChange={setValue} format='12' />Anti-patterns
— Do not hardcode data in molecules
— Avoid complex business logic in molecules