Time Picker

Accessibility

TimeInput renders labeled segments and a button that opens a list of times. The list is a popover, not the browser's native time control.

What the component handles

Name. The label prop names the field.
Keyboard. Segments accept typed times. The list button opens the popover, and the list is keyboard operable.
Range. Start and end are in one field so the relationship is one control, not two unlabeled native inputs.

What you must provide

A localized label for a single time, and labels that distinguish start and end in a range.
min and max when a time outside the window is invalid. The component does not render a separate error string; put that copy on the surrounding Field or form errorSummary.

On this page

Accessibility

TimeInput renders labeled segments and a button that opens a list of times. The list is a popover, not the browser's native time control.

What the component handles

Name. The label prop names the field.
Keyboard. Segments accept typed times. The list button opens the popover, and the list is keyboard operable.
Range. Start and end are in one field so the relationship is one control, not two unlabeled native inputs.

What you must provide

A localized label for a single time, and labels that distinguish start and end in a range.
min and max when a time outside the window is invalid. The component does not render a separate error string; put that copy on the surrounding Field or form errorSummary.

On this page