Component

Time Picker

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

Sizes

sm / md / lg, shown empty with a custom placeholder.

States

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

It does not read invalid from an enclosing FormField - set invalid on the picker itself

Without the clear control

clearable={false} for a time that should always have a value.

name renders a hidden input, so the 24-hour HH:mm value submits with a native form

API reference

Prop	Type	Default	Description
aria-label	string	"Select time"	Accessible name for the trigger. Default `"Select time"`. Inside a `FormField`, the field's label names it instead (its `aria-labelledby` takes precedence).
aria-labelledby	string	None	Points at an existing visible label's id, as an alternative to `aria-label`.
className	string	None	Extra classes merged onto the trigger.
clearable	boolean	true	Show a clear control when a value is set. Default true.
defaultValue	string	None	Starting value when uncontrolled, in the same 24-hour "HH:mm" form.
disabled	boolean	None	Disables the trigger, so the list cannot be opened.
hourCycle	12 \| 24	24	Display format. The stored value is always 24-hour "HH:mm". Default 24.
invalid	boolean	None	Manually flags the invalid visual/aria state for standalone use. Inside a `FormField`, the field's own invalid state is picked up automatically.
minuteStep	number	5	Minute increment for the list. Default 5.
name	string	None	Renders a hidden input so the value posts with a form.
onChange	((value: string) => void)	None	Called with the 24-hour "HH:mm" string, whatever `hourCycle` displays.
placeholder	string	"Select time"	Text on the trigger while nothing is selected.
size	ComponentSize	"md"	Trigger height, matching `Input` and `Button` at the same size.
value	string	None	Value as a 24-hour "HH:mm" string. This is the stable form/value contract regardless of display format.

aria-label"Select time"

string

Accessible name for the trigger. Default `"Select time"`. Inside a `FormField`, the field's label names it instead (its `aria-labelledby` takes precedence).

aria-labelledbyNone

string

Points at an existing visible label's id, as an alternative to `aria-label`.

classNameNone

string

Extra classes merged onto the trigger.

clearabletrue

boolean

Show a clear control when a value is set. Default true.

defaultValueNone

string

Starting value when uncontrolled, in the same 24-hour "HH:mm" form.

disabledNone

boolean

Disables the trigger, so the list cannot be opened.

hourCycle24

12 | 24

Display format. The stored value is always 24-hour "HH:mm". Default 24.

invalidNone

boolean

Manually flags the invalid visual/aria state for standalone use. Inside a `FormField`, the field's own invalid state is picked up automatically.

minuteStep5

number

Minute increment for the list. Default 5.

nameNone

string

Renders a hidden input so the value posts with a form.

onChangeNone

((value: string) => void)

Called with the 24-hour "HH:mm" string, whatever `hourCycle` displays.

placeholder"Select time"

string

Text on the trigger while nothing is selected.

size"md"

ComponentSize

Trigger height, matching `Input` and `Button` at the same size.

valueNone

string

Value as a 24-hour "HH:mm" string. This is the stable form/value contract regardless of display format.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent