TimePicker

Molecule

Native `<input type="time">`-based time field with label/hint/error slots, matching the Input/DatePicker pattern. M1 baseline — hour/minute only, no timezone or 12h/24h toggle yet (tracked for the DateTimePicker milestone).

Default

Preview

24-hour format

Code
const [time, setTime] = useState('09:00');
<TimePicker id="meeting" label="Meeting time" value={time} onChange={setTime} hint="24-hour format" />

Required / error

Preview
Code
<TimePicker id="pickup" label="Pickup time" required error="Pickup time is required." value={time} onChange={setTime} />
Sourcemodules/ui/DateRangePicker.tsx