Prepared Docs

Overview

TimePicker wraps @prepared911/ui-core Input with type="time" and a Label. Platform semantics for the native input—keyboard handling, OS picker dialogs, and the roles reported by the browser—come for free on supporting browsers. The app is responsible for the visible label, distinguishing start / end fields in a range, and any committed-value announcement.

What the component handles

Native <input type="time">. Platform keyboard behavior and accessibility come from the browser. On macOS / iOS, VoiceOver announces the label plus the current value; on Windows, Narrator reads the time segments as they receive focus.
Label association. label + id produce an associated Label; hideLabel retains the label element (still used for the accessible name) while hiding it visually.
Tail icon. Default is a clock glyph (SVGAsset.Time). The icon is decorative; it does not carry an accessible name.
Range variants. TimeRangePicker and TimeRangeInputs compose two TimePickers with an en-dash separator and localized "From" / "To" labels; each input retains its own native accessibility.

What you must provide

Visible label or an external Label. Always pair every TimePicker with a label: placeholder or tooltip is not a name.
Distinct start / end labels when composing TimePicker directly for a range. The range helpers already supply this.
Committed-value announcement when the time change drives a visible-elsewhere state (e.g. a filter summary). Live regions are rarely needed: the field itself exposes the value to assistive tech.
Error copy. The component does not render validation inline. Surface errors via @prepared911/ui-core Input error patterns or external helper text tied to the field.

Keyboard behavior

Tab / Shift+Tab moves to and from the field.
Native input semantics handle hour, minute, and AM/PM adjustment (arrow keys within the focused segment, or direct typing) depending on the browser.
Space is not consumed by the input; custom tail icons should handle their own activation.

Semantics and roles

<input type="time"> is reported by the browser with appropriate roles. Supporting browsers expose a spin or listbox semantic per segment.
Label is a native <label> associated by htmlFor / id.
Tail icon is an <svg> with aria-hidden (decorative); do not rely on it as a label or trigger.

Known caveats

Browser inconsistency. Native time pickers render differently across browsers and locales; test with the browsers your operators use.
No inline validation. Pair with @prepared911/ui-core Input error patterns or helper text for bad values.
Ranges need explicit distinction. Two TimePickers without distinct labels read identically in speech. Use the range helpers or set label explicitly.

Time Picker / API and Development

Date Time Picker / Usage

Overview

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Overview

What the component handles

Native <input type="time">. Platform keyboard behavior and accessibility come from the browser. On macOS / iOS, VoiceOver announces the label plus the current value; on Windows, Narrator reads the time segments as they receive focus.
Label association. label + id produce an associated Label; hideLabel retains the label element (still used for the accessible name) while hiding it visually.
Tail icon. Default is a clock glyph (SVGAsset.Time). The icon is decorative; it does not carry an accessible name.
Range variants. TimeRangePicker and TimeRangeInputs compose two TimePickers with an en-dash separator and localized "From" / "To" labels; each input retains its own native accessibility.

What you must provide

Visible label or an external Label. Always pair every TimePicker with a label: placeholder or tooltip is not a name.
Distinct start / end labels when composing TimePicker directly for a range. The range helpers already supply this.
Committed-value announcement when the time change drives a visible-elsewhere state (e.g. a filter summary). Live regions are rarely needed: the field itself exposes the value to assistive tech.
Error copy. The component does not render validation inline. Surface errors via @prepared911/ui-core Input error patterns or external helper text tied to the field.

Keyboard behavior

Tab / Shift+Tab moves to and from the field.
Native input semantics handle hour, minute, and AM/PM adjustment (arrow keys within the focused segment, or direct typing) depending on the browser.
Space is not consumed by the input; custom tail icons should handle their own activation.

Semantics and roles

<input type="time"> is reported by the browser with appropriate roles. Supporting browsers expose a spin or listbox semantic per segment.
Label is a native <label> associated by htmlFor / id.
Tail icon is an <svg> with aria-hidden (decorative); do not rely on it as a label or trigger.

Known caveats

Browser inconsistency. Native time pickers render differently across browsers and locales; test with the browsers your operators use.
No inline validation. Pair with @prepared911/ui-core Input error patterns or helper text for bad values.
Ranges need explicit distinction. Two TimePickers without distinct labels read identically in speech. Use the range helpers or set label explicitly.

Time Picker / API and Development

Date Time Picker / Usage

Overview

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats