How to build an accessible TimePicker in React
Renders a native <input type="time"> so segmented HH/mm entry, format enforcement, and keyboard support come from the platform; error text is linked via aria-describedby with aria-invalid.
When to use a TimePicker
- Capturing a time of day (HH:mm) in a form, such as a meeting or reminder time
- You want the native OS time entry UX with built-in formatting and validation
- A time field that needs a label, hint, error, or min/max bounds
When not to use it
- Picking a calendar date — use DatePicker
- A free-form or non-time text value — use Input
Keyboard interactions
Role textbox, verified at WCAG 2.2-AA.
Tab
Common mistakes
Avoid: <Input placeholder="HH:mm" /> // hand-rolled time field
Prefer: <TimePicker label="Start" />
A plain Input cannot enforce time format or offer the native time UI; TimePicker gives parsing and locale handling for free
Example
<TimePicker label="Meeting time" onChange={(v) => console.log(v)} />