Time Input

A Text Input with a clock icon for a time of day. Users type the time in HH:MM or open the Time Picker as a shortcut.

npx sdaia-ui@latest add time-input

Usage

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

<TimeInput label="Time" placeholder="HH:MM" value={time} onChange={setTime} />

Empty field with the format hint. Click, press Enter or Arrow Down to open the picker.

Loading demo: time-input-default

A time is entered.

Loading demo: time-input-filled

24-hour text and picker, 15-minute steps.

Loading demo: time-input-24-hour

"25:00" is not a time: onChange reports null, so the field shows an error.

Loading demo: time-input-error

The field cannot be edited and the picker does not open.

Loading demo: time-input-disabled

The Time Picker opens under the field box.

Loading demo: time-input-open

The label and the clock icon mirror; the digits stay left to right.

Loading demo: time-input-rtl

Prop	Type	Default	Required
value	TimeValue \| null	—	optional
defaultValue	TimeValue \| null	null	optional
defaultInputValue	string	—	optional
onChange	(time: TimeValue \| null, text: string) => void	—	optional
format	"12-hour" \| "24-hour"	"12-hour"	optional
label / placeholder / helperText / error	string	—	optional
pickerTitle	string	—	optional
pickerFooter	boolean	true	optional
minuteStep	number	5	optional
open / defaultOpen / onOpenChange	boolean / (open) => void	—	optional
labels	Partial<TimeInputLabels>	—	optional
disabled / required / size / dir	—	—	optional

The field is a combobox with aria-haspopup="dialog" (the APG date picker combobox pattern), labelled with <label for>; helper and error text are linked with aria-describedby.
Click, Enter or Arrow Down open the picker; the keyboard moves focus to the selected hour. Escape, Cancel and Apply close it and return focus to the field; a click outside or tabbing away closes it too.
The typed format works without the picker: 9:30, 09:30, 0930, 21:30, 9:30 pm, 9 PM, ص / م and Arabic-Indic digits are understood; a valid time is tidied on blur.
The picker is a named dialog whose columns are listboxes (see Time Picker).

The field is fluid; the popup keeps the picker's width and never grows past the viewport minus 16 px gutters.
Unset size follows Text Input: medium below 768px, large from 768px.