- Text areas are multi-line fields that allow users to write content that will be shared with us.
- The content entered into text areas are usually free form without many validation rules governing them.
- Text areas are defined by the “textarea” html tag.
Use clear, actionable labels to tell the user what to enter.
Clearly mark when a text area is required and when it isn’t.
Show character counter when there is a character limit on how much the user can type into the field.
Clearly highlight a text area that’s in focus when a user selects it.
Be sure the text area 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 area 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. 29 2019 8:20pm||Ella Ip||Updated UI Kit link to the consolidated Form Element file.|
|May. 08 2017 4:56pm||Initial content entry|