Design Text input

Working examples

The best NATO letter is:

Example: Alpha, Bravo, Charlie

Description text

When a person using a screen reader encounters a text field, they hear the label/name of the field, that it’s a text field, and they automatically hear the descriptive helper text.

• The text should be of a size and contrast that it’s easy to read (it does not have to be tiny and grayed out)
• Do not put descriptions in a tooltip

Required input

The second NATO letter is: Required

Disabled but focusable input

• There may be times that it is advantageous for the input to be disabled but still focusable
• Fully disabled inputs are not focusable and may not be as discoverable in a form
• Use readonly to prevent editing

The first NATO letter is:

Fully disabled input

• Fully disabled inputs are not focusable so may not be as discoverable in a form

The suavest NATO letter is:

readonly input

• Only use readonly when presenting already submitted information.
• readonly inputs are focusable but not editable
• VoiceOver does not describe readonly attribute, so aria-disabled was added to reinforce that it’s not editable

The fourth NATO letter is:

Email input

• Setting type="email" changes the keyboard for mobile app users

Email address

We’ll never sell or share your information

Group of inputs

After the screenreader focuses on each input, it will read the group name “Enter your personal information” after the input.

Enter your personal information

First name Last name Username

Annotations for text fields

• Define the type
  • type="text"
  • type="email"
  • type="tel"
  • type="url"
  • type="date"
• For number inputs (like PIN)
  • type="text" inputmode="numeric"

Related text input entries

• Android criteria: Text input field
• iOS criteria: Text input field
• Web criteria: Text input