Use a textarea to help a user enter an answer to a question that is likely to be longer than one line. For example, to answer an open-ended question.
A good use of this component is to ask the user for feedback about your service.
When not to use this component
Open-ended questions can be difficult for users to answer.
How to use this component
All textarea components must have a visible label.
This can be with or without a description.
The size of a textarea should help the user understand what content it was intended for.
By default, the textarea component will fill the width of its container and has a default height of 8 lines of text.
Change the height of a textarea
To change the height of a textarea, use the
Change the width of a textarea
A textarea will fill 100% of the width of it’s container.
To decrease the width of a textarea, use a width constrained class.
The character limit counter is displayed when the
charCheckLimit object is defined with
Mutually exclusive textarea
Use the mutually exclusive variant to let a user give a contrasting answer instead of filling in the textarea.
This macro is called automatically when the
mutuallyExclusive parameter is set, which adds the:
- mutually exclusive checkbox
- required aria-live alert markup
How to check a textarea
To help users enter something in a required textarea:
- check they have entered something in the textarea
- show an error message if they have not entered anything
Show the error details above the textarea and use the correct errors pattern.
If the textarea is empty
Use “Enter [whatever type of text is being asked for]”.
For example, “Enter your feedback” or “Enter a job title”.
Research on this component
This component was last user tested between February and September 2020. The following findings were reported:
- along with the size of the textarea, the character limit helps users know how long their answer should be
- the character counter is often not noticed until the user starts to enter text
- users that look down at a keyboard while they type may not notice the character counter
- users prefer a limit on characters that can be entered as it prevents them entering far more text than is needed
- the change from black to red text when the character limit is reached helps users notice the counter