Text Input

A text input is a basic form control that allows users to enter freeform text. It is the most commonly used input field.

Accessibility Features

  • An <input> has a visible <label>, associated via matching for and id attributes or nesting. Note that multiple <input>s (or other interactive elements) must not be nested inside a single <label>.
  • aria-describedby associates help texts, error messages and prefixes/suffixes with the input.
  • Placeholder text must not be used as a substitute for a label as it is not permanent and disappears on input.

Single-line Text

The native <input type="text"> element should always be used for single-line text, as it provides built-in keyboard support, screen reader announcements and mobile keyboard optimisation.

Example

Code Snippet

Textarea

A <textarea> allows users to enter multiline text. The maxlength attribute limits the number of characters and a visible counter keeps users informed of the remaining characters.

Example

Code Snippet