Time picker

A time-of-day field with a list of selectable times

Opens a scrollable list of times generated from a range and a step, so every choice is a valid one. The value is always a 24-hour HH:MM string; the 12-hour or 24-hour display is a formatting choice.

Default

Hour formats

Steps and ranges

Weekdays, 9 to 5

Compact

States

Local time

Please select a time

tsx
// From the npm package
import { TimePicker } from 'rift-ds/components/TimePicker/TimePicker';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/time-picker.json