Skip to content
UX Atlas
ComponentCraft conventionFoundational

Text Input

Free-form entry, where the label, the hint and the error placement do most of the work.

Definition

A text input collects typed data. Its usability is determined almost entirely by whether the user knows what to type, whether the field accepts what they type, and what happens when it does not.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Anatomy
  3. Details that matter more than they look
  4. Continue from here

Anatomy

  • A visible label above the field, always. Placeholder-as-label fails as soon as the user types.
  • Optional hint text below the label, describing format or purpose before the user types.
  • The field itself, with a visible border meeting 3:1 non-text contrast.
  • Error text below the field, associated with aria-describedby, with aria-invalid on the field.
  • Character counters where a limit exists, announced politely rather than on every keystroke.

Details that matter more than they look

  • Set autocomplete attributes correctly. WCAG 1.3.5 requires them for fields collecting user information, and they make browser autofill work.
  • Use inputmode and type to bring up the right mobile keyboard.
  • Size the field to suggest the expected input length. A postcode field the width of an address is misleading.
  • Never disable paste. It breaks password managers and is a genuine accessibility barrier.
  • Accept the formats people actually type, and normalise on the server.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA FormA Search ExperienceAuthentication

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.