Input Date
A date picker input (YYYY-MM-DD). Delegates to the native browser date picker. Supports min and max date constraints.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the date input. |
| Shift + Tab | Move focus away from the date input to the previous element. |
| Type digits | Enter date segments directly (month, day, year) by typing numeric values. |
| Arrow Up / Down | Increment or decrement the currently focused date segment. |
| Enter | Open or close the native browser date picker dialog. |
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 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="date"> via Shadow DOM id association. |
Label association
The label is associated with the inner <input type="date"> via Shadow DOM id association. Screen readers announce the label and the current date value on focus.
Native date picker
The component delegates entirely to the browser's native date picker, which is fully keyboard-navigable. Users can enter a date by typing directly or through the picker dialog. The picker dialog is managed by the browser's own accessibility implementation.
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.
Date format guidance
Use the description prop to communicate the expected date format when needed, particularly for Safari where the field falls back to a plain text input.
Focus management
delegatesFocus: true routes host focus to the inner 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. Date segments can be entered by typing or adjusted 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="date"> 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. - Safari fallback — Safari may render the native date picker differently or fall back to a plain text field. Always provide a
placeholderor description that communicates the expected format (e.g.YYYY-MM-DD) so users know what to enter. - Error messaging — always pair
state="error"with a meaningfulmessageprop. Colour alone is insufficient for users who cannot distinguish red from other colours.