Textarea allows users to enter a sizeable amount of free-form text, like leaving feedback, adding a description, creating a note, and more. If an input requires users to write longer forms of text, use a textarea instead of a single text-input field.
- Labels should clearly indicate input expectations of the user
- Labels should describe purpose and must be used for all textarea inputs
- Placeholder text should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message
- Don't use placeholder text as a replacement for labels
- The textarea label should help users understand input expectations
- Labels are placed above the textarea
- Labels are to be written in sentence case and should only be 1-3 words long
Placeholder text is shown inside the textarea to help users know what information they can enter.
- Field placeholder text is used for supplementary information
- The text should be written as examples instead of instructions
Indicates that the user can interact with the text area.
Indicates that the user is unable to interact with the text area.
Indicates that the user must specify a value for the input before the form can be submitted.
Indicates that the field cannot be edited by the user.
Indicates that an error occurred with the supplied value in the text area.
- Every textarea must have a label. A textarea without a label is ambiguous and not accessible
- In cases where context is sufficient and a label could be hidden, make sure to have the design reviewed
- Labels must be visible when an input gets focus
- Labels must be announced to the screen reader on focus
- Use sentence case
If the text input is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.