Components
Time Picker
A simple and intuitive time selection component with scrollable hour, minute, and AM/PM columns. Uses react-aria primitives for accessibility and focus management.
Installation
API Reference
TimePicker
| 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. - Popover automatically manages focus and closes on selection.
- Each time value is rendered as a button for full keyboard accessibility.
- Scrollable regions keep navigation intuitive and friendly on touch devices.
Notes
- Hours are displayed in 12-hour format with AM/PM toggles.
- All columns are scrollable and optimized for vertical picking.
- The helper
toDateconverts the selected values into a valid JavaScriptDate. onSelectfires immediately when any part of the time is chosen (hour, minute, or period).