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.
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:
- Name with placeholder
- With error
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
Disabled / Disabled name with placeholder
4. With Error
Default / Hover + select / Active / Active + mouseout / Corrected
Default / Hover / Active / Active + mouseout / Completed / Error
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.
Users navigate from one component to the next using the tab key. The tab index should follow the visual layout. The first item in the form is active or on focus by default.
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