Modifiers
With placeholder text
New research has shown that placeholder text strains users’ short-term memory and clutters the UI — see the user research section for more information. Don’t rely on placeholder text to deliver important information. Add help text if the textarea needs more explanation.
With help text
Add help text to further explain the textarea’s function or meaning. Use help text if there is too much information to fit into the textarea’s label.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
With error message
If a textarea throws an error, an error message will appear below the textarea.
Delete the invalid value in the preview to clear the error message.
This is an example of an error message.
With help text and error message
If a textarea requires help text and throws an error, an error message will appear above the help text.
Delete the invalid value in the preview to clear the error message.
This is an example of an error message.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
Manual resize
The textarea can be manually resized vertically using the icon in the bottom right corner of the text box.
Auto-resize
The textarea will automatically resize as the user types in the text box.
States
Disabled
A textarea can be disabled if the experience requires it. If you need to disable a textarea, make sure the reason is obvious. If the reason is not obvious, you can keep the textarea enabled and add an error message to explain. The user’s entry or non-entry within the textarea will not be submitted with the form’s data.
Readonly
Set the textarea to readonly if the user should not be allowed to enter or change the textarea’s entry and if that entry should be submitted along with the rest of the form’s data.
Required
The textarea should be required if the user must fill out that field to submit the form. Ensure that the textarea’s information is necessary before requiring a user to fill it out.
Usage
Textareas allow users to enter or edit multiple lines of text. Textareas are usually part of a form.
Mobile keyboards aren’t as easy or quick to type on as a laptop, so keep this experience in mind when designing with textareas.
Do:
- Use textareas for entering or editing multiple lines of text
- Mark textareas as required
- Add help text when further explanation is needed
- Remove the textarea’s placeholder text if it is unnecessary
Don't:
- Use textareas for single lines of text or data — use a text input instead
- Remove the textarea’s visible label — only do this when absolutely necessary; you must have an aria-label for screen readers
Content guidelines
Labels are required for all textareas. When necessary, a textarea can have help text added.
If the textarea is required or if the textarea requires a certain format or content restriction, the field must also have an error message explaining these requirements to the user.
Do:
- Use concise, clear language for labels, placeholder text, and help text
- Use sentence case for labels, placeholder text, and help text
- Review error messaging guidelines when writing error messages
- Provide an aria-label for when the textarea’s visible label is removed
- Add help text when providing additional information
- Write the help text as a self-contained piece of content
- Append invisible text to the end of the label, if necessary
Don't:
- Rely on the textarea’s placeholder text to explain the field’s purpose — use help text instead
- Use placeholder text as an example of the input’s content format
- Add verbs to textarea labels
- Remove the textarea’s visible label unless it is necessary
- Rely on the placeholder text as a substitute for a label
- Add invisible text in the middle of textarea label
User research
Key takeaways
Textareas on mobile devices
When designing forms, keep the mobile experience in mind. Ensure that the textarea is large enough for touch screen users to interact with, and that the textareas are necessary.
Labels
Labels should be visible at all times. The only way visible labels can be removed is if the input’s function is obvious, if it is necessary, and if the input field has an aria-label attached to it.
Placeholder text
New research has shown that placeholder text strains users’ short-term memory and clutters the UI. We will continue to provide an option to add placeholder text, but will keep in mind that we shouldn’t rely on placeholder text to deliver important information. Add help text if the textarea needs more explanation. Placeholder text should remain visible until the user types at least one character into the field.
Required fields
Required fields should be marked with text saying “required” instead of using an asterisk to provide more clarity. Research has found that marking fields as “required” and “optional” lightens the user's cognitive load. Currently, we are only marking fields as required to keep input labels uncluttered and easier to scan.
Alignment
Textareas should be ordered vertically, unless circumstances dictate otherwise. Vertical form fields are easier to scan and understand.
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that this component is fully accessible.
See these references for more information: