Primitive

Time list

Scrollable time option listbox for compact picker workflows.

TimeList owns the listbox and option chrome. Higher-level components generate valid intervals, format labels, and commit selected values.
form
DOM renderImage render
Time listDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Time list with selected value.
Render state

Formatted

Floating time list state with a nearby selected value.
Render state

Later

Later selected value.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
options *readonly string[]-Available time values.
valuestring-Selected time value.
onSelect *(value: string) => void-Selection callback.
formatOption(value: string) => ReactNode-Optional visible label formatter.