- Accept both numbers and letters
- Are usually found in forms
- Allow users to type information that we will receive
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
Credit card type detection
Input type recognition
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.
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
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
- 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.
|Date/Time of Change||Who Made the Change||Change Details|
|Jul. 30 2019 3:34pm||Ella Ip||Updated textfield patterns for web and responsive web.|
|Jul. 26 2019 3:16pm||Ella Ip||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.|