Input Text
A single-line text input for freeform string values. Supports label, description, validation states, dense mode (compact), and character limits.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the input. |
| Shift + Tab | Move focus away from the input to the previous element. |
| Type | Enter text directly into the field. |
| 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 (when active) or the description text. Description is hidden when a message is shown to avoid redundant announcements. |
aria-label / aria-labelledby | From label prop | Associates the visible label with the inner <input>. Still present in the accessibility tree when hideLabel is true. |
Label association
The label prop renders a visible <label> inside Shadow DOM, associated with the inner <input> via matching id / htmlFor. Screen readers announce the label on focus.
When hideLabel is true, the label is visually hidden but still present in the accessibility tree and used as the accessible name.
Required fields
Setting required adds a visual asterisk (*) next to the label and sets aria-required="true" on the inner <input>.
Validation state
When state="error", the component sets aria-invalid="true" on the input. The message element is associated via aria-describedby, so screen readers announce the error text after the field label.
Description
A non-empty description is also linked via aria-describedby. When a message is present the description is hidden to avoid redundant announcements.
Focus management
The component uses delegatesFocus: true in its Shadow DOM, so calling .focus() on the host element or tabbing to it forwards focus directly to the inner <input>.
Reduced motion
All transitions respect the prefers-reduced-motion: reduce media query.
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.
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="text"> 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. - Description vs. message — avoid providing the same text in both
descriptionandmessage— when a message is present, the description is hidden to prevent redundant screen reader announcements. - Error messaging — always pair
state="error"with a meaningfulmessageprop. Colour alone is insufficient for users who cannot distinguish red from other colours.