Design Tokens for Mesh have just been released!
Skip to content

Use a textarea when the expected user input is multiple line of text. They are commonly used in forms.

Installation

bash
npm install @nib-components/textarea

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx
import Textarea from '@nib-components/textarea';

Interactive demo

jsx

Props

As the <Textarea/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

All props passed directly to <Textarea/> will be applied to the underlying <input> as attributes.

Labels

Labels help the user understand what information to enter into the textarea field. Labels are short, concise and use sentence-style capitalisation.

Optional inputs

Denote optional fields by adding “(Optional)" to the end of the textarea label.

Accessibility best practices for labels

  • Labels must be visible when a textarea is in focus.
  • Labels must be announced to the screen reader on focus.

Placeholder text

Avoid using placeholder text in textareas. Placeholder text is not accessible due to low colour contrast and the disappearing placeholder text requires the user to rely on their short-term memory to complete the field correctly. Placeholder text can also be mistaken as a default value causing the user to skip the field completely.

Help text should be used in place of placeholder text to communicate supporting instructions.

Help text

Help text is an instruction that supports a user to fill out a textarea field. It can also be used to clarify how the information will be used. It is optional and should only be used where needed.

Help text should appear below the label and above the textarea field. Use sentence-style capitalisation and concise sentence/s.

Accessibility best practices for help text

  • Help text displayed above the textarea field allows screen readers to read the help information before the user completes a field.

Textarea height

The height of the textarea should reflect the expected amount of information to be provided. This visual cue gives the user a hint as to how much text to enter.

Validation and errors

Textarea validation should happen in real-time so the user can fix input errors when they occur. The success state should appear when the input is valid and the error state should appear when the input is invalid.

The success state is denoted with a green border on the bottom of the textarea field and a green success icon.

The error state is denoted with a red border, a red error icon and a red error message below the textarea field. A good error message clearly describes how to address the input error. The error state only appears when the user clicks/taps away from the textarea field. Once the user corrects the textarea input error, the error state is replaced with the success state.

Please provide some additional comments.

Accessibility best practices for validation and errors

  • Validation states must not rely on colour alone to convey the error information as users with visual impairments may skip over this information. Using colour and an appropriate icon is recommended.
  • Add the required attribute to the textarea field if it's a required field.
  • To help screen reader users, the error message should include a hidden ‘Error:’ before the error message. These users will hear, for example, “Error: Please enter your email address.”.