Skip to main content

Textarea

Use textarea to let users enter more than 1 line of text.

Code and design

Open in new window
Copy
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span class="nhsuk-hint" id="more-detail-hint">
    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="nhsuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>
Copy
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "more-detail",
  "id": "more-detail",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

When to use textarea

Use textarea when you want users to enter an amount of text that’s longer than a single line.

When not to use textarea

Users can find open-ended questions difficult to answer. It's usually better to break up 1 complex question into a series of simple ones, for example where users can select from options using radios.

If you need to ask an open question

Do not use textarea if you want users to enter an answer no longer than a single line, such as a phone number or name. In this case, you should use text input.

How to use textarea

Label textareas

You must label textareas. Do not use placeholder text for a label, as it disappears when users click inside the textarea.

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

Use the right size of textarea

Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by specifying the rows attribute.

Open in new window
Copy
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span class="nhsuk-hint" id="more-detail-hint">
    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="nhsuk-textarea" id="more-detail" name="more-detail" rows=" 10 " aria-describedby="more-detail-hint"></textarea>
</div>
Copy
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "more-detail",
  "id": "more-detail",
  "rows": "10",
  "label": {
      "text": "Can you provide more detail?"
  },
  "hint": {
      "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

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

Style error messages like this:

Open in new window
Copy
<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="no-ni-reason">
    Why can&#39;t you provide a National Insurance number?
  </label>
  <span class="nhsuk-error-message" id="no-ni-reason-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> You must provide an explanation
  </span>
  <textarea class="nhsuk-textarea nhsuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
</div>
Copy
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Why can't you provide a National Insurance number?"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  }
}) }}

Follow:

Research

We tested the textarea component on a "Register with a GP" prototype at 2 labs in December 2018. Users understood the purpose of the textarea and were able to use it.

If you’ve used this component, get in touch to share your user research findings.

Discuss

Discuss textarea on GitHub

Get in touch

If you have a question:

Updated: January 2019