Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Textarea

These examples are used for automated tests and may not follow service manual best practice.

Textarea default

Open this example in a new tab: Textarea default

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="example">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="example-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="example" name="example" rows="5" aria-describedby="example-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  name: "example"
}) }}

Textarea with size S label

Open this example in a new tab: Textarea with size S label

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--s" for="custom-size">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="custom-size-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="custom-size" name="example" rows="5" aria-describedby="custom-size-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "s",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "custom-size",
  name: "example"
}) }}

Textarea with size M label

Open this example in a new tab: Textarea with size M label

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="custom-size">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="custom-size-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="custom-size" name="example" rows="5" aria-describedby="custom-size-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "m",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "custom-size",
  name: "example"
}) }}

Textarea with size L label

Open this example in a new tab: Textarea with size L label

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="custom-size">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="custom-size-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="custom-size" name="example" rows="5" aria-describedby="custom-size-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "custom-size",
  name: "example"
}) }}

Textarea with size XL label

Open this example in a new tab: Textarea with size XL label

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--xl" for="custom-size">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="custom-size-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="custom-size" name="example" rows="5" aria-describedby="custom-size-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "xl",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "custom-size",
  name: "example"
}) }}

Textarea with autocomplete attribute

Open this example in a new tab: Textarea with autocomplete attribute

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-autocomplete-attribute">
      Full address
    </label>
  </h1>
  <textarea class="nhsuk-textarea" id="with-autocomplete-attribute" name="example" rows="5" autocomplete="street-address"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Full address",
    size: "l",
    isPageHeading: true
  },
  id: "with-autocomplete-attribute",
  name: "example",
  autocomplete: "street-address"
}) }}

Textarea with error message

Open this example in a new tab: Textarea with error message

Error: You must provide an explanation

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      Can you provide more detail?
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> You must provide an explanation
  </p>
  <textarea class="nhsuk-textarea nhsuk-textarea--error" id="with-error-message" name="example" rows="5" aria-describedby="with-error-message-error"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "You must provide an explanation"
  },
  id: "with-error-message",
  name: "example"
}) }}

Textarea with hint

Open this example in a new tab: Textarea with hint

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-hint">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="with-hint" name="example" rows="5" aria-describedby="with-hint-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "with-hint",
  name: "example"
}) }}

Textarea with hint and error

Open this example in a new tab: Textarea with hint and error

Do not include personal information like your name, date of birth or NHS number

Error: You must provide an explanation

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-hint-error">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> You must provide an explanation
  </p>
  <textarea class="nhsuk-textarea nhsuk-textarea--error" id="with-hint-error" name="example" rows="5" aria-describedby="with-hint-error-hint with-hint-error-error"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  errorMessage: {
    text: "You must provide an explanation"
  },
  id: "with-hint-error",
  name: "example"
}) }}

Textarea without page heading

Open this example in a new tab: Textarea without page heading

Do not include personal information like your name, date of birth or NHS number
Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="without-heading">
    Can you provide more detail?
  </label>
  <div class="nhsuk-hint" id="without-heading-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea" id="without-heading" name="example" rows="5" aria-describedby="without-heading-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import textarea -%}

{{ textarea({
  label: {
    text: "Can you provide more detail?"
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "without-heading",
  name: "example"
}) }}