TimePicker

molecules

Time picker (24h format), separate from date. Used for event start time and doors time.

ARIA Role: listbox

Demo

Demo for TimePicker (molecules)

Time picker (24h format), separate from date. Used for event start time and doors time.

Props

Prop	Type	Required	Default	Description
`value`	`string`	No	`—`	Selected time (HH:MM)
`onChange`	`(time: string) => void`	Yes	`—`	Time change handler
`disabled`	`boolean`	No	`false`	Disabled state
`label`	`string`	No	`—`	Field label
`error`	`string`	No	`—`	Validation error message
`format`	`'12h' \| '24h'`	No	`'24h'`	Time format

TypeScript Interface

interface TimePickerProps {
  value?: string;
  onChange: (time: string) => void;
  disabled?: boolean;
  label?: string;
  error?: string;
  format?: '12h' | '24h';
}

Assertions (NASA Rule 5)

[aria]Input must have aria-haspopup='dialog'(WAI-ARIA APG)
[aria]Selected time announced via aria-live(WCAG 4.1.3)
[validation]Format HH:MM (24h) or HH:MM AM/PM (12h)(ISO 8601)
[keyboard]Arrow keys adjust hours and minutes(WCAG 2.1.1)

Usage

Import

import { Timepicker } from '@epasslive/design-system'

Basic

<Timepicker />

With Variants

<Timepicker variant="primary" size="md" />