Components

Textarea

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span id="more-detail-hint" class="govuk-hint">
    Don’t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>
{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  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."
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

When to use this component

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

When not to use this component

Don’t 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 it works

There are 2 ways to use the textarea component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span id="more-detail-hint" class="govuk-hint">
    Don’t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>
{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  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."
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

Label textareas

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. Don’t 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 a textarea by by specifying the rows attribute.

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span id="more-detail-hint" class="govuk-hint">
    Don’t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
</div>
{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  id: "more-detail",
  rows: "8",
  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."
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

Don’t disable copy and paste

Users will often need to copy and paste information into a textarea, so you shouldn’t prevent them from doing this.

Research on this component

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

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Textarea’ on GitHub