Text Input

A text input accepts a single line of freeform text from the user, paired with a visible label and optional hint or error text connected through accessible attributes.

Demo

Tab to each input field and type to enter text. Observe how the label remains visible above the field at all times. Trigger a validation error by submitting or leaving a required field empty, and listen for how a screen reader announces the error message in relation to the input.

What to Observe

Each input has a persistent visible label — no placeholder text is used as a substitute for a label.
When focus enters the field, a screen reader announces the label, the input type, and any associated hint text.
Error messages appear near the input and are associated programmatically so screen readers announce the error without requiring the user to hunt for it.
Required fields communicate that requirement through both a visible indicator and an accessible attribute on the input.
The focus ring on each input is clearly visible and has sufficient contrast against the surrounding background.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Label: A <label> element associated with the input through a matching for and id pair; it is always visible and never replaced by a placeholder.
Input field: The <input> element where the user types, with an appropriate type attribute and an autocomplete hint where applicable.
Hint text: An optional message below the label or field providing format guidance, linked to the input through aria-describedby.
Error message: A validation message displayed when input is invalid, injected into a live region or linked via aria-describedby so it is announced automatically.
Required indicator: A visual marker (typically an asterisk) accompanied by a text explanation, and the required or aria-required attribute on the input.

Accessibility Behavior

Every input must have a visible label that remains on screen at all times — placeholder text alone is never an acceptable label.
The label must be programmatically associated with its input so screen readers announce it when focus enters the field.
Hint and error messages must be connected to the input through aria-describedby so they are read alongside the field's label.
Error messages must be presented in a way that does not rely solely on color — text or an icon with a text alternative must also indicate the problem.
Required fields must communicate that requirement both visually and programmatically through the required attribute.
The input must use the appropriate type attribute and autocomplete hint to help users with cognitive disabilities and autofill tools complete the field accurately.

Common Mistakes

Using placeholder text as the only label, which disappears as soon as the user starts typing and is never read reliably by all screen readers.
Displaying an error message visually without linking it to the input, so screen readers do not associate the message with the field that caused it.
Indicating a required field with an asterisk alone, without a visible legend explaining what the symbol means.
Using a generic type="text" for inputs that have a more specific type, such as email or telephone, losing autocomplete and keyboard optimization benefits.
Applying error styling only through a red border color, making the error state invisible to users with color vision deficiencies.

Why This Matters

Text inputs appear on nearly every form in every application, and form completion is one of the most critical tasks users perform online — account creation, checkout, contact, and support all depend on it. A text input that lacks a persistent label, properly associated error message, or keyboard-accessible behavior can completely block a screen reader user or a keyboard-only user from completing a task. Because forms are so universal, getting this pattern right has the highest possible impact on the number of people who can successfully use an interface.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.