Time Picker

A popover for choosing a time with scrollable hour and minute columns, plus AM / PM in the 12-hour format. Use it as a shortcut next to the Time Input.

Installation

npx sdaia-ui@latest add time-picker

Usage

import { TimePicker } from "@/components/ui/TimePicker"

<TimePicker title="Select time" value={time} onApply={setTime} onCancel={close} />

12-hour

Hours, minutes and AM or PM, with a title and the Cancel / Apply footer.

Loading demo: time-picker-default

Examples

24-hour

Hours and minutes only. Use 24-hour on operational, audit and reporting screens.

Loading demo: time-picker-24-hour

Without title

Hide the title in tight layouts; the selected time stays in the header.

Loading demo: time-picker-no-title

Every selection applies at once through onChange (15-minute steps here).

Loading demo: time-picker-no-footer

RTL

The columns and labels mirror; the digits stay left to right.

Loading demo: time-picker-rtl

Props

Prop	Type	Default	Required
format	"12-hour" \| "24-hour"	"12-hour"	optional
value	TimeValue \| null	—	optional
defaultValue	TimeValue \| null	null	optional
onChange	(value: TimeValue) => void	—	optional
onApply	(value: TimeValue) => void	—	optional
onCancel	() => void	—	optional
title	string	—	optional
footer	boolean	true	optional
minuteStep	number	5	optional
autoFocus	boolean	false	optional
labels	Partial<TimePickerLabels>	—	optional
dir	"ltr" \| "rtl"	—	optional

Accessibility

Each column is a listbox (Hours, Minutes, AM or PM) with one Tab stop: Tab moves between columns, Arrow Up / Down move the selection inside a column, Home / End jump to the ends, PageUp / PageDown move five options.
Enter applies the time, Escape cancels; in a Time Input both return focus to the field.
The selected option is shown by fill and weight as well as colour; the focused option has a 2px Border/border-focus ring.
Columns scroll by themselves to keep the selection in view; the page never scrolls.
Footer buttons are Button components with 24 px targets.

Responsive behaviour

The card keeps its Figma width (300 px with AM / PM, 260 px without) and shrinks with its container below that.
Padding and gaps use the responsive spacing tokens.