NICE Design System home

Textarea

Use a textarea to let users enter more than one line of text

Use a textarea to let users enter more than one line of text, providing a text area appropriate for the amount of information someone needs to enter.

When to use

Use the textarea component when you need to let users enter an amount of text longer than a single line.

When not to use

Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the text input component.

How to use

You must label textareas. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.

Labels must be aligned above the textarea they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

React
HTML

_10
<Textarea label="Your address" name="address"></Textarea>

Using hint text

Use hint text to give users help in context; for example, enter your full address, including postcode.

Enter your full address including postcode

React
HTML

_10
<Textarea
_10
label="Your address"
_10
name="addresshint"
_10
hint="Enter your full address including postcode"
_10
></Textarea>

Do not disable copy and paste

Users will often need to copy and paste information into a textarea, so do not stop them from doing this.

Error messages

Error messages should be styled like this:

Please enter your full address

React
HTML

_10
<Textarea
_10
label="Your address"
_10
name="addresshint"
_10
error={true}
_10
errorMessage="Please enter your full address"
_10
></Textarea>

When to use an error message

Show an error message using the hint text when there is a validation error.

Use standard messages for different components.

Accessibility

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research/evidence

We tested the textarea component on a "Identity and Access Management" prototype in April 2019. Users understood the purpose of the textarea and were able to use it.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.