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

The Time Picker relies on the react-aria-components and react-stately libraries.

npx @tailgrids/cli add time-picker

Anatomy

Import the component and pass the required props.

import { TimePicker, TimePickerTrigger } from "@/registry/core/time-picker";

export const TimePickerExample = () => (
  <TimePicker onSelect={date => console.log(date)}>
    <TimePickerTrigger>Select Time</TimePickerTrigger>
  </TimePicker>
);

Examples

Basic Usage

A standard time picker implementation using react-aria for accessibility. It provides a trigger button that opens a popover with scrollable columns for hours, minutes, and AM/PM selection.

With Label

You can combine the Time Picker with a label and other elements to create a complete form control.

Custom Trigger

The TimePickerTrigger can be customized or replaced with any element that accepts refs and props.

API Reference

TimePicker

TimePickerTrigger

Extends Button props from react-aria-components.

Accessibility

• Keyboard Support: Full keyboard navigation support for all time values.
• Screen Readers: Works correctly with screen readers and assistive technologies.
• Focus Management: Popover automatically manages focus and closes on selection to trigger.
• Semantic HTML: Uses MenuTrigger and Popover from react-aria for proper ARIA roles.