- 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 responsive text field
Clearly mark whether a text field is required.

Android system text field
Mask passwords to protect users’ privacy and security as they type.


Highlight the currently selected text field to show focus.

Desktop text field
Available functionality
Auto-fill
Credit card type detection
Password redaction
Auto-suggest
Input type recognition
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
Related elements
Related components
Version History
Date/Time of Change | Who Made the Change | Change 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. |