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.

Run time

Playground

Props in the URL.

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

Loading playground.

States

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

Run time

Default

Closed time field.

Run time

Open

Scrollable time menu.

Run time

Dense

Short interval list for detailed scheduling.

Props

Name	Type	Default	Description
`value`	`TimeValue`	-	Controlled HH:mm value.
`defaultValue`	`TimeValue`	`14:30`	Uncontrolled initial HH:mm value.
`defaultOpen`	`boolean`	`false`	Initial time menu state.
`interval`	`number`	`30`	Minute interval for generated options.
`onValueChange`	`(value: TimeValue) => void`	-	Receives the selected HH:mm value.
`label`	`ReactNode`	-	Field label.