Component

Time picker

Compact HH:mm picker with interval-generated options and controlled value support.

Time picker stays a focused menu primitive for time-of-day selection; timezone and scheduling rules belong to product code.
form
DOM renderImage render
Time pickerDefault
Runs after the model batch is hydrated.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Dense scheduling fields for agent run windows.
Runs after the model batch is hydrated.
Render state

Open

Scrollable time menu.
Open menu exposes the selected option and compact rows.
Render state

Dense

Short interval list for detailed scheduling.
Fifteen-minute intervals for tight scheduling.
Render state

Success

Confirmed handoff time with success feedback.
Handoff time confirmed.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueTimeValue-Controlled HH:mm value.
defaultValueTimeValue14:30Uncontrolled initial HH:mm value.
defaultOpenbooleanfalseInitial time menu state.
intervalnumber30Minute interval for generated options.
onValueChange(value: TimeValue) => void-Receives the selected HH:mm value.
labelReactNode-Field label.