Time Picker
React Time Picker components allow users to select a specific time value using a clear, scrollable interface. They are commonly used in booking forms, scheduling flows, reminders, and time-based filters.
This Time Picker is built with React and uses react-aria primitives for accessibility and focus management. It provides scrollable columns for hours, minutes, and AM/PM selection, making time selection fast and predictable.
Installation
API Reference
TimePicker
The root container responsible for managing time selection state.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Trigger element (usually TimePickerTrigger) |
onSelect | (date: Date) => void | — | Callback when hour/minute/period selection updates |
TimePickerTrigger
Extends Button props from react-aria-components.
| Prop | Type | Description |
|---|---|---|
className | string | Custom styles for the trigger button |
...props | ButtonProps | All button props supported |
TimeColumn (internal)
Not exported publicly. Renders the scrollable list for hours, minutes, and period.
Accessibility
- Uses
MenuTriggerandPopoverfromreact-ariafor proper ARIA roles and keyboard support. - Full keyboard navigation support for all time values
- Popover automatically manages focus and closes on selection.
- Each selectable time value is rendered as a native
<button> - Works correctly with screen readers and assistive technologies
Notes
- Uses a 12-hour format with AM/PM selection
- Hour, minute, and period columns are independently scrollable
- The helper
toDateconverts the selected values into a valid JavaScriptDate. onSelectfires immediately when any part of the time is chosen (hour, minute, or period).- Optimized for mouse, keyboard, and touch interactions