Refine By

Text area

  • 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.

Style

 

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.

See Also

 

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jul. 29 2019 8:20pm Updated UI Kit link to the consolidated Form Element file.
May. 08 2017 4:56pm Initial content entry