Design Pattern

Form Input (Text + Error)

A text input field is the most basic building block of a web form. By correctly implementing the label, help text, validation, and error display, you can build forms that every user can fill in without confusion.

Difficulty: Beginner Category: Forms

When to use / not use

Use it when

  • When accepting free-form text input from users
  • Inputs such as names, email addresses, passwords, or search keywords
  • When validation and feedback on the input value are needed

Don't use it when

  • When the options are limited → use a select element or radio buttons
  • When long-form input is required → use a textarea element
  • When the value has a fixed type, such as a date or number → use the dedicated input type

Anatomy

1 Label (description of the field + required marker)
2 Input field (the text entry box)
3 Help text (hints or supplementary information)
4 Error message (shown when validation fails)
  1. Label — Describes the input. Associated with the field via the for attribute on the label element
  2. Input field — The input element. The type attribute specifies the kind of input
  3. Help text — Hints or supplementary information. Associated using aria-describedby
  4. Error message — Displayed when validation fails. Notified to screen readers via the ARIA alert role

HTML Structure

Key points

  • Associate the label with the input explicitly (placeholder is not a substitute for a label)
  • Declare required fields with the required attribute, and hide the visual "*" from screen readers with aria-hidden
  • Use aria-describedby to associate both the help text and the error message
  • On error, set aria-invalid to true and notify the error message via the alert role

CSS Implementation

Styling for each state

  • Default — A light border signals that the field accepts input
  • Focus — Use :focus-visible to show the ring only on keyboard focus
  • Error — Switch to a red border via the aria-invalid attribute selector
  • Disabled — Change the background color to visually indicate it is not operable

Accessibility

WCAG 1.3.1 Info and Relationships

Associate the label and field programmatically. Don't rely on visual layout alone.

WCAG 3.3.1 Error Identification

When an input error is automatically detected, identify the location and describe it to the user in text.

WCAG 3.3.2 Labels or Instructions

When user input is required, provide a label or instructions. A placeholder alone is not enough.

WCAG 3.3.3 Error Suggestion

When an error is detected, suggest how to correct it.

Keyboard operation

  • Use Tab to move focus into the input
  • Validation runs when focus leaves the field via Tab
  • Press Enter to submit the form

Live Demo

Basic input

A simple composition of label + input + help text.

PreviewFullscreen

Validation

Real-time error display. Validation runs when focus leaves the field.

PreviewFullscreen

NG / OK comparison

Comparison of an unlabeled field vs. a labeled one. A placeholder alone is not enough.

PreviewFullscreen

Common mistakes

Using placeholder as a substitute for a label

Placeholders disappear the moment typing starts, so users forget what they are supposed to enter.

Conveying errors with color alone

A red border alone doesn't explain the error. Always show a text error message.

Not setting aria-invalid

Even if the error is visible, screen readers can't recognize the error state without aria-invalid.

Vague error messages

Instead of "input error," present a specific way to fix it.