Shadcn Time Picker: Columns, Typed Input, Steps and Bounds

What is Shadcn Time Picker?

A time picker turns a time of day into a value you can store without parsing free text: each unit is a column, and a pick in one column keeps the others where it can. Shadcn Time Picker is 12 composable parts and a useTimePicker hook. With no children the root renders an outline trigger and a popover, TimePickerPanel inside it gives an always-open picker, and TimePickerInput gives a field people can type into.

Columns follow the granularity and the clock: hour only, hour and minute, or hour, minute and second, plus an AM/PM column on a 12-hour clock. Steps thin each column, so a 15-minute step shows 00, 15, 30 and 45, and each list of 5 rows centers its selected row.

Steps, bounds and unavailable times

min and max are inclusive, and a min later than max is an overnight window, so a night shift can run from 22:00 to 02:00. isTimeDisabled marks single times unavailable, such as a lunch hour or booked slots, and an hour with nothing left to pick is disabled in its column.

Every route in respects them. A column pick lands on the nearest selectable time, a tie going to the earlier one, a typed time outside the bounds or marked unavailable moves to the nearest one that is not, and Now floors the clock to the steps, so 14:38 on a 15-minute step becomes 14:30. A value you set in code through value or setValue is kept as given.

Shadcn Time Picker Features

• Scrollable listbox columns. Each unit is a listbox. Arrow keys, Home, End, Page Up and Page Down move the selection, Left and Right switch columns, and typing 1 then 4 within a second jumps to 14.
• Typable input. TimePickerInput reads 930, 14:30, 14h30, 2:30 pm and 2p, plus full-width, Arabic-Indic and Persian digits, on blur or Enter. Up and Down step to the next or previous free time.
• Steps, bounds and blocked times. hourStep, minuteStep and secondStep thin the columns, min and max set the window, overnight included, and isTimeDisabled greys out single times.
• 12 or 24-hour clock. hourCycle switches the display and periodPosition puts AM/PM before the time for Chinese, Japanese and Korean. The value stays 24-hour either way.
• Confirm with OK. requireConfirm keeps picks, Now and Clear as a draft until OK, and closing the popover discards them, so a change applies once or not at all.
• Native form field. Give the root a name and the value submits with a plain form or a server action, with required, a form attribute, and a form reset that restores the default.
• Localized labels. 12 labels and 2 format functions cover the headers, AM and PM, the buttons, the placeholder, the accessible names and the digits. Override one key and the rest keep their defaults.
• Every shadcn style. Rows copy the shadcn Select item height and radius in all 8 styles, and a --time-picker-rows variable sets how many rows show, 5 by default.

Accessibility and right-to-left

Each column is a listbox named by its header, the selection follows the arrow keys like a native wheel, and every list is described by the full time, so a screen reader hears 14:30 and not just 30. Given aria-labelledby, the trigger's name joins your label and the current value, and Tab cycles inside the open popover until Escape or OK closes it.

Columns always run left to right, because a time reads hour first in right-to-left text too, and forced colors mode marks the selection with the system highlight. readOnly keeps the columns focusable so the value can still be read, while keys and clicks leave it unchanged.