Input Time
A time picker input (HH:MM). Delegates to the native browser time picker. Supports min, max, and step constraints.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the time input. |
| Shift + Tab | Move focus away from the time input to the previous element. |
| Type digits | Enter hour, minute, or second values directly into the focused segment. |
| Arrow Up / Down | Increment or decrement the currently focused time segment (hours, minutes, seconds, or AM/PM). |
| Enter | Submit the enclosing form (if any). |
Screen reader behaviour
The following ARIA attributes are managed internally by the component:
| Property | Value | Note |
|---|---|---|
aria-required | "true" when required is set | Communicates the required state to assistive technologies. |
aria-invalid | "true" when state="error" | Signals a validation failure. Paired with aria-describedby pointing at the error message. |
aria-describedby | ID of the message or description element | Links the error or description text to the input so screen readers announce it on focus. |
aria-label / aria-labelledby | From label prop | Associates the visible label with the inner <input type="time"> via Shadow DOM id association. |
Label association
The label is associated with the inner <input type="time"> via Shadow DOM id association. Screen readers announce the label and the current time value on focus.
Native time picker
The component delegates to the browser's native time picker. Users can navigate between hour, minute, and second segments with arrow keys or by typing. AM/PM segment is navigable when the locale uses 12-hour format.
Required fields
required adds a visual asterisk and aria-required="true".
Validation state
state="error" sets aria-invalid="true" and links the error message via aria-describedby.
step and granularity
The step value (in seconds) affects the minute/second segments shown. Whenstep is set to a value that includes seconds (e.g. 30), the seconds segment becomes visible in the picker. Screen readers announce the step via the spinbutton role of each segment.
Focus management
delegatesFocus: true routes host focus to the time input. Reduced-motion styles respect prefers-reduced-motion.
WCAG 2.2 compliance
1.3.1 Info and Relationships — APass
Label, required indicator, and error message are all programmatically associated with the input via ARIA attributes.
1.4.3 Contrast (Minimum) — AAPass
Input text and label foreground colours meet the 4.5:1 minimum contrast ratio against the field background in both themes.
2.1.1 Keyboard — APass
All functionality is operable via keyboard. Time segments are navigable and adjustable with arrow keys.
2.4.7 Focus Visible — AAPass
A visible focus ring is applied on keyboard focus using :focus-visible styles.
3.3.1 Error Identification — APass
When state="error", the error message is linked via aria-describedby so screen readers announce it on focus.
4.1.2 Name, Role, Value — APass
The inner <input type="time"> exposes correct name, role, and value to assistive technologies via delegated focus and ARIA labelling.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - Step and granularity — the
stepattribute (in seconds) controls which time segments are visible. When seconds precision is needed, set step to a value that exposes the seconds segment; omitting it shows hours and minutes only. - Error messaging — always pair
state="error"with a meaningfulmessageprop. Colour alone is insufficient for users who cannot distinguish red from other colours.