Form elements - Textarea

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

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper"><label class="nhsuk-label nhsuk-label--l" for="example">
      Can you provide more detail about how you move about (your mobility)?
    </label></h1>
  <div class="nhsuk-hint" id="example-hint">
    For example, if you use crutches, sticks, or a walking frame
  </div> <textarea class="nhsuk-textarea" id="example" name="example" rows="5" aria-describedby="example-hint"></textarea>
</div>

{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  name: "example",
  id: "example",
  label: {
    text: "Can you provide more detail about how you move about (your mobility)?",
    classes: "nhsuk-label--l",
    isPageHeading: "true"
  },
  hint: {
    text: "For example, if you use crutches, sticks, or a walking frame"
  }
}) }}

When to use textarea

Use textarea when you want users to enter multiple lines of text.

Use it when you are confident that users will:

• input the information you need
• not input information that could cause clinical or safeguarding concerns, for example, details of medical symptoms or harmful behaviour that your service is not designed to deal with

If you are not sure about this, talk with your clinical team.

Textarea can cause problems as users may:

• find open questions difficult to answer
• input information that's difficult to analyse
• disclose personal information, for example, about their symptoms or situation and expect you to reply quickly

They may ignore messages in hint text such as "Do not include personal information like your name, date of birth or NHS number".

Consider other ways to collect the information you need. Use structured, closed questions if possible. For example, let users select from options using radios or checkboxes.

When not to use textarea

If you want users to enter a single line answer, such as a phone number or name, use text input.

Only use textarea if your team has considered the alternatives and agreed that it's the best way to meet user and business needs.

How to use textarea

Understand and manage the risks

Users sometimes use open text boxes to report health concerns or difficult circumstances that are not relevant to your service, even if you ask them not to. Your team must monitor and respond to any clinical safety or safeguarding concerns.

If you cannot do this, it can leave:

• users in unsafe situations
• staff feeling stressed and uncertain what to do
• the organisation facing reputational harm or legal action for not acting on information

Read our guidance on making sure you need each question.

If you use textarea in a public service, make sure you:

• assess the risks
• talk with your clinical and legal teams
• if relevant, set expectations at the start that your service cannot respond to information about an individual's medical situation and signpost to GPs or 111
• make your question as specific as possible and consider setting a character limit
• put in place a process for monitoring and dealing with safety issues, including over weekends and holidays
• set up technical safeguards, for example to detect inappropriate content

Read more about managing clinical risk in NHS service standard 16: Make your service clinically safe.

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.

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="example-right-size">
    Provide a reason for continuing
  </label>
  <div class="nhsuk-hint" id="example-right-size-hint">
    Explain the clinical decision for continuing despite a recent mammogram
  </div> <textarea class="nhsuk-textarea" id="example-right-size" name="example-right-size" rows="3" aria-describedby="example-right-size-hint"></textarea>
</div>

{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  name: "example-right-size",
  id: "example-right-size",
  rows: "3",
  label: {
    text: "Provide a reason for continuing"
  },
  hint: {
    text: "Explain the clinical decision for continuing despite a recent mammogram"
  }
}) }}

If you are using a large textarea in a public service, with or without character count, be aware that giving users more space may increase clinical risk.

Using hint text

Use hint text to give users help in context, for example, tell users what information to include or not to include. But bear in mind that users may ignore this, especially in public services.

Read more about hint text.

Do not disable copy and paste

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

Error messages

Style error messages like this.

<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="example-error">
    Provide a reason for continuing
  </label> <span class="nhsuk-error-message" id="example-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter the clinical decision.
  </span> <textarea class="nhsuk-textarea nhsuk-textarea--error" id="example-error" name="example-error" rows="3" aria-describedby="example-error-error"></textarea>
</div>

{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  name: "example-error",
  id: "example-error",
  rows: "3",
  label: {
    text: "Provide a reason for continuing"
  },
  errorMessage: {
    text: "Enter the clinical decision."
  }
}) }}

Follow:

• our guidance on error messages
• GOV.UK design system guidance on textarea error messages

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.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: September 2025