Component

Time Picker

Fuji-styled time picker built on Popover with hour and minute lists. It keeps a stable 24-hour HH:mm value contract so it drops into forms, while the display can use 12- or 24-hour format.

24-hour

12-hour with minute step

States

Disabled and invalid. The clear control appears once a value is set.

API reference

Prop	Type	Default	Description
value	string ("HH:mm")	None	Controlled 24-hour value.
defaultValue	string ("HH:mm")	None	Uncontrolled initial value.
onChange	(value: string) => void	None	Fires with the 24-hour value.
hourCycle	12 \| 24	24	Display format only.
minuteStep	number	5	Minute increment in the list.
clearable	boolean	true	Show a clear control when set.
invalid	boolean	false	Error styling.
disabled	boolean	false	Disable interaction.
name	string	None	Renders a hidden input for form posting.
className	string	None	Additional classes applied to the component root.

valueNone

string ("HH:mm")

Controlled 24-hour value.

defaultValueNone

string ("HH:mm")

Uncontrolled initial value.

onChangeNone

(value: string) => void

Fires with the 24-hour value.

hourCycle24

12 | 24

Display format only.

minuteStep5

number

Minute increment in the list.

clearabletrue

boolean

Show a clear control when set.

invalidfalse

boolean

Error styling.

disabledfalse

boolean

Disable interaction.

nameNone

string

Renders a hidden input for form posting.

classNameNone

string

Additional classes applied to the component root.