Refine By

Text fields

  • Contents:

Text fields:

  • Accept both numbers and letters
  • Are usually found in forms
  • Allow users to type information that we will receive

Guidelines

 

Clear, actionable labels tell the user what to enter.

a text field with a clear label

A responsive text field

Clearly mark whether a text field is required.

A clearly-marked required field

Android system text field

Mask passwords to protect users’ privacy and security as they type.

A password field with a masked entry

Highlight the currently selected text field to show focus.

A selected text field displays a highlight to show that it's in focus.

Desktop text field

Accessibility

 

Be sure the text field with focus has visible focus.

If an entry field is required, use the word “required” in the <label for> tag, so screen readers can inform users.

Inform the user about specific data formats to avoid input validation input errors.

Provide visual and verbal instructions for all required fields.

Read More

 Visible Focus

When a text field receives keyboard focus or when a user clicks into the field, that focus must be visibly shown. There are several ways to do this, including:

  • Displaying a vertical bar in the field to show that the user can insert text
  • Displaying a visible border around the field
  • Highlighting all placeholder text to indicate that the user can type over the placeholder

Required Fields

At the start of a form, inform the user in plain language that some fields are required. Provide a key for how required fields are indicated.

Here are some ways to indicate required fields:

  • Choose consistent words or symbols to programmatically associate with required fields
    • Usually contained within the label element
  • Visually indicate a required field with:
    • An asterisk (*, also called “keyboard star”) next to the field
    • The world “required” next to the field label
    • An inline image (like a graphic star) with an appropriate alt attribute (like “mandatory text field” or “required information”)
  • Verbally indicate a required field with:
    • The word “required” as part of the <label for> tag
    • The word “required” as part of the HTML 5 code
    • area-required=true

Other considerations

  • When focus lands on a text field, there should be no change of context.
  • When a user types in the field or tabs out of it, this should not trigger a change of context.

See also

 

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jul. 30 2019 3:34pm Updated textfield patterns for web and responsive web.
Jul. 26 2019 3:16pm Updated UI kit link to the consolidated Form Element sketch file.
Mar. 21 2017 1:01pm Initial content entry for text fields per the master doc.