Components
Textarea
Textarea is used when the user needs to enter text that spans multiple lines.
What you need to check
The field must have a visible label.
Screen readers must present the label, description, and error messages when the field receives focus.
You can use Field to connect the label, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”.
See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
Placeholder must not be used as the only label or for important information.
Placeholder text disappears when the user starts typing and is not always read out by assistive technologies. Use it only as an example of the expected content or format – see Avoid placeholder text.
Use the correct autocomplete value when the field concerns the user themselves.
The correct autocomplete makes it easier to fill in forms and is required for fields that concern the user’s own personal information. See Purpose of input for when and how to use it.
Test with a Keyboard
Verify that you can
- reach the textarea using Tab
- enter and edit text using the keyboard
- move between lines using the arrow keys
- create new lines using Enter
- select text using Shift + the arrow keys, then copy, replace, or delete the selected text
- move to the next field using Tab