- Contents:
- 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.
Guidelines
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.

Accessibility
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.
Visible Focus
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
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.
Available Functionality
Character Count
See Also
Further Reading
Related Elements
Related Components
- Guest Info & Payment (Special Requests)
- Local Site Contact Pages (e.g, Arizona Biltmore)
Version History
Date/Time of Change | Who Made the Change | Change Details |
---|---|---|
Jul. 29 2019 8:20pm | Updated UI Kit link to the consolidated Form Element file. | |
May. 08 2017 4:56pm | Initial content entry |