Input Email
An email address input. Provides native browser email validation, appropriate mobile keyboard, and autocomplete hints.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the email input. |
| Shift + Tab | Move focus away from the email input to the previous element. |
| Type | Enter an email address. The browser validates format on submit. |
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="email">. Set hideLabel to visually hide it while keeping it accessible. |
Label association
The label prop renders a visible <label> inside Shadow DOM associated with the inner <input type="email">. Set hideLabel to visually hide it while keeping it accessible.
Input type semantics
Using type="email" gives mobile browsers the email keyboard layout (with @ and .com shortcuts) and triggers native format validation before submit. Screen readers may announce additional context about the expected format.
Required fields
Setting required adds a visual asterisk and sets aria-required="true" on the inner input.
Validation state
When state="error", aria-invalid="true" is set on the input. The message element is linked via aria-describedby so the error is announced by screen readers.
Focus management
delegatesFocus: true forwards host focus to the inner input. Reduced-motion styles are applied via 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. The email field is reachable via Tab and supports standard text input interaction.
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="email"> 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. - Mobile keyboards —
type="email"activates an email-optimised keyboard (with @ and . shortcuts) on mobile devices automatically, reducing input errors. - Error messaging — always pair
state="error"with a meaningfulmessageprop. Colour alone is insufficient for users who cannot distinguish red from other colours.