We present users with a multi-line area for viewing data or entering information or search terms. We call this a text area.

When we want to show users a form field where they can enter only one line of copy, we use a text field.

Usage

We show a text area in forms where users need to enter sometimes lengthy data, such as information that may run over to two or more lines.

There are five elements or states of text areas:

  1. Enabled
  2. Name with placeholder
  3. Disabled
  4. With error
  5. Required

1. Enabled/text area

For accessibility, text labels are required for all input items. Use clear, concise, consistent labels to guide the user. If the subject is complicated, find words to make it simpler. Each label is left-justified and appears above the field it describes.

Default / Hover / Active / Active+MouseOut

2. Name with Placeholder

Default / Hover / Active / Active = mouseout

3. Disabled

Disabled / Disabled name with placeholder

4. With Error

Default / Hover + select / Active / Active + mouseout / Corrected

5. Required

Default / Hover / Active / Active + mouseout / Completed / Error

Accessibility

For accessibility, the order of the fields should read top-to-bottom, left-to-right. Labels are always above form fields, never to the left.

Accessibility pro tip

Labels, tooltips, and input fields should appear in the right keyboarding tab order. See accessibility guidelines

Responsive behavior

On mobile phones and tablets only, we use line style form fields. Form field labels sit on the line until the field is put in focus and/or completed. This applies to all types of form fields.

Form style on mobile devices

Form behavior on mobile devices

Content guidelines for text areas

  • Form labels are sentence case. Examples: Customer name, Payment type
  • A black asterisk appears at the end of labels for required fields. Do not include *Required as a footnote or legend on the page.
  • Ghost text capitalization is sentence case.
  • Ghost text is italicized within the field. However, “optional” text may appear to the right of field labels when calling out optional instead of required fields.
  • Although credit card, phone, account, and Social Security numbers should be partially masked with asterisks (that is, except the last four digits), passwords are completely masked.
  • Punctuate ghost text only when it’s a complete sentence.
  • Use ghost or hint text to take the place of field labels or to give more information about filling out a field, such as required formatting and restrictions.
  • Recommended voice and tone attributes: straightforward, encouraging, experienced

Demo

Launch Preview
x
px wide

  • Was this Helpful?
  •