Time Picker

A time typed in a field (hours, minutes, seconds) or picked from slots between two hours, in 12 or 24 hours.

Installation

npx rasengan-ui add time-picker

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/time-picker.json

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import { TimeInput, TimePicker } from "@/components/ui/time-picker";
 
export function Usage() {
  return (
    <>
      <Field>
        <FieldLabel>Start time</FieldLabel>
        <TimeInput defaultValue="09:30" />
      </Field>
      <Field>
        <FieldLabel>Meeting slot</FieldLabel>
        <TimePicker min="09:00" max="17:30" interval={30} />
      </Field>
    </>
  );
}

Two ways to ask for a time, both valued "HH:mm":

• TimeInput is the browser's own time field in an Input Group: typed segment by segment, in the locale's 12 or 24 hours, with a native picker on phones.
• TimePicker is a Select of slots from min to max, every interval minutes: opening hours, appointments.

Both are Field controls, so a FieldLabel names them and they take the Field's size and variant.

Seconds, 12 or 24 hours

step under 60 adds the seconds to TimeInput ("HH:mm:ss"). TimePicker labels its slots in the locale's hour cycle, or the one you set with hourCycle={12} or {24}.

Slots beside a calendar

timeSlots({ min, max, interval }) returns the slots with their labels, to lay out yourself: here as toggle buttons (aria-pressed) beside a Calendar, for a booking.

For a day and a time together, use DateTimePicker.

Villages

TimeInput is Input's field and TimePicker Select's, in every village.

Accessibility

• TimeInput is a native time input: screen readers announce each segment, and the arrow keys change it.
• TimePicker is Base UI's select: type a time's first characters to jump to it, Enter picks.
• Taken slots in your own layouts should be disabled, not only greyed, so the keyboard skips them.

API reference

timeSlots({ min, max, interval, locale, hourCycle }) returns { value, label }[].