NICE Design System home

Textarea

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

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

React
HTML

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

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.

Use appropriately-sized textareas

Make the height of a textarea proportional to the amount of text you expect users to enter.

You can set the height of the textarea by specifying the rows attribute in HTML or the rows prop in our react component.

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.

Grouped textareas

Feedback Details
React
HTML

_10
<FormGroup legend="Feedback Details">
_10
<Textarea
_10
label="What could be improved?"
_10
name="improvement_feedback"
_10
></Textarea>
_10
<Textarea label="Additional Comments" name="additional_comments"></Textarea>
_10
</FormGroup>

Multiple related textarea fields should be grouped with our Form group component.

The form group:

  • wraps the inputs in a fieldset with a legend that describes the group
  • allows you to add hint text that applies to the entire group.

Using hint text

Use hint text to give users help in context. Keep hint text short and simple.

Do not use links in hint text. While screen readers will read out the link text when describing the item, they usually do not tell users the text is a link.

Hint text can be added to both:

  • An individual textarea field
  • The overall group of textarea inputs when used together in a form group.

Individual input hint text

Add hint text to individual text inputs to provide additional context or help.

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>

Grouped inputs hint text

Add hint text to the group of textarea fields to give context or help about the overall group.

Feedback Details

Please answer all fields clearly and avoid including any personal or sensitive information.

React
HTML

_10
<FormGroup
_10
legend="Feedback Details"
_10
hint="Please answer all fields clearly and avoid including any personal or sensitive information."
_10
>
_10
<Textarea
_10
label="What could be improved?"
_10
name="improvement_feedback"
_10
></Textarea>
_10
<Textarea label="Additional Comments" name="additional_comments"></Textarea>
_10
</FormGroup>

Asking complex questions

If you’re asking a question that needs a detailed explanation, don’t use hint text, instead use:

  • a heading that’s a statement (for example, ‘Interview needs’) rather than a question
  • whatever mix of text, paragraphs, lists and examples best explains your question to users
  • a label, above the form input, that asks users a specific question – for example, ‘Do you have any interview needs?’

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

Only display an error when someone tries to move to the next part of the form or service.

Do not show error messages:

  • when users select or tab to a field
  • when users type into a field
  • when they move away from a field.

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.2 - 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.2 - 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.2 - 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.