Text Area

For fields with character limits, users will see a dynamic count displayed above the text area. When the limit is exceeded, the text and counter will display the error state and change color (Red 700).

Generally, there are two validation errors for this component: empty required fields and exceeding the character limit. In those scenarios, the text changes color (Red 700) and a warning icon appears in the field. An error message also displays under the input. Do not display helper text and error messages at the same time.

Helper text appears below the text field. Its purpose is to provide assistance in filling out the relevant field. Keep the content concise. Use as few words as possible to guide users and help them avoid making errors.

Labels must accurately describe the purpose of the input fields. Every input field should have a label. Label text should be left-aligned (or right-aligned for right-to-left languages) with the input. Label text should be in sentence case and contain as few words as possible.

The height of the text area is customizable. As a general rule, calculate the height so that the entire text entry is visible to the user. When text entries surpass the predetermined fixed height, a native vertical scroll bar appears, which could present usability challenges, depending on the operating system, device, or browser.

Placeholder text is optional and should be used in combination with helper text. Using only placeholder text introduces accessibility concerns because the text is not read by screen readers. Placeholder text is designed to disappear when the user begins entering text, which makes it difficult for people to remember the information provided by the placeholder copy.


When writing placeholder text in combination with helper text, consider the ways in which these pieces of content can complement each other. For example, helper text can provide the user with instructions while placeholder text can give a preview of the format for the requested information.

To reduce confusion and visual noise, limit optional field entries and display only those which are required. Instruct users with introductory form text that says: “All fields are required unless marked optional.” Optional fields should be written as: Label (optional).

The text area component has five behaviors and states: rest, hover, focus, inactive, and error. In general, avoid using the inactive state unless it is part of a progressive disclosure flow, where the field becomes active only after the user has completed the previous task or answered a question.

Make sure all labels are clear, concise, and unique
All users should know from the label exactly what information is needed to complete that field successfully.
WCAG 2.1: 1.3.1 Info and Relationships

Use helper text to convey instructions instead of placeholder text
Avoid using placeholder text to instruct users, which disappears upon selection and entry. Use a succinct and clear helper text instead.
WCAG 2.1: 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions

Make sure all helper text and error messages provide meaningful assistance in helping users avoid or fix errors
Don’t provide unclear helper text, such as “enter a valid email address.” Instead, make it clear how a valid email address should be formatted.
WCAG 2.1: 3.3.2 Labels or Instructions, 3.3.3 Error Suggestion

Make restrictive formatting requirements clear to users
If a field requires a specific kind of user input, such as whole numbers, or a limited number of characters, that should be communicated in advance using helper text and/or error messaging.

Capitalization
Use sentence case for labels, default values, detected values, and autocompleted text, excepting product names and proper nouns.


Punctuation
Label text does not require punctuation, however helper text typically does. Avoid using colons at the end of label text.


Label text
Label text should clearly state the required input in one to three words. Label text is different from helper text, so avoid using them for the same purposes.