Form controls

TimePicker

A time field built from one input per segment rather than one masked field. Each segment is a spinbutton with its own name and its own bounds, so arrow keys step it, digits type into it, and a screen reader announces the hour without reading the minutes back. The value on the wire is always 24-hour, whatever the display shows.

Basic

Type digits, or use the arrow keys. Home and End jump to the ends of a segment, PageUp and PageDown move by ten, and left and right walk between segments.

Opens at

Value: 09:30

Under a touch screen each segment, AM and PM included, takes a 44px target, and the segments spread a few pixels apart so no target takes its neighbor's. A press anywhere else in the field, on its padding or a colon, focuses the nearest segment, under a mouse as well.

With seconds

A third segment appears and the wire format grows to HH:MM:SS. The field stays empty until every one of its segments is filled, so a half-typed time is never published as a whole one.

Lap time

Value: 00:05:30

Twelve hour

hour12 changes only what is drawn. The hour segment runs 1 to 12 beside an AM and PM segment that a click, an arrow key, or A or P sets. The bound value stays 24-hour, so a form posts the same string either way.

Meeting

Value: 14:15

Step and bounds

step is the arrow-key step for the minute and second segments. The hour always moves by one, because a step of 15 is a statement about minutes. min and max are applied to the whole time and never to a segment alone, so with a floor of 09:30 the time 10:15 is still legal.

Appointment

Between 09:30 and 17:00, on the quarter hour.

Value: (empty)

API

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable 24-hour time, HH:MM or HH:MM:SS. Empty until every segment is filled.
`label`	`string`	no default	Field label, rendered as the group name.
`hint`	`string`	no default	Subdued hint below the field. An error replaces it.
`error`	`string`	no default	Error message. Reddens the border.
`seconds`	`boolean`	`false`	Add a seconds segment.
`hour12`	`boolean`	`false`	Draw 12-hour with an AM and PM segment. The value stays 24-hour.
`step`	`number`	`1`	Arrow-key step for the minute and second segments. The hour always steps by one.
`min`	`string`	no default	Earliest time, as HH:MM or HH:MM:SS.
`max`	`string`	no default	Latest time, as HH:MM or HH:MM:SS.
`required`	`boolean`	`false`	Mark as required for form validation. Renders a red asterisk.
`disabled`	`boolean`	`false`	Disable every segment.
`id`	`string`	no default	DOM id the segment ids are built from. Generated when omitted.
`name`	`string`	no default	Native form name. One hidden input carries the whole value, not one per segment.
`class`	`string`	no default	Extra classes on the field wrapper.
`onchange`	`(value: string) => void`	no default	Fires whenever the published value changes.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.