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.

For a segment-based keyboard input, see the Time Field component.

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 "@/components/tailgrids/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

The popover-based time picker component.

TimePickerTrigger

Extends Button props from react-aria-components.

Accessibility

• Keyboard Support: Users can navigate the popover columns using Arrow keys and select values with Enter.
• Screen Readers: Uses MenuTrigger and Popover roles to ensure screen readers announce the interactive elements correctly.
• Focus Management: Focus is moved into the popover when opened and returned to the trigger upon selection or dismissal.