This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Textarea

Textarea

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Textarea with hint

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <div id="more-detail-hint" class="govuk-hint">
    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
  </div>
  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>

Macro

{% from "govuk/components/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."
  }
}) }}

Textarea with error message

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="no-ni-reason">
    Why can’t you provide a National Insurance number?
  </label>
  <p id="no-ni-reason-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> You must provide an explanation
  </p>
  <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

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

Textarea with default value

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="full-address">
    Full address
  </label>
  <textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
London
NW1 6XE
</textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "full-address",
  name: "address",
  value: "221B Baker Street\nLondon\nNW1 6XE\n",
  label: {
    text: "Full address"
  }
}) }}

Textarea with custom rows

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="full-address">
    Full address
  </label>
  <textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "full-address",
  name: "address",
  label: {
    text: "Full address"
  },
  rows: 8
}) }}

Textarea with label as page heading

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
      Full address
    </label>
  </h1>
  <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "textarea-with-page-heading",
  name: "address",
  label: {
    text: "Full address",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}) }}

Textarea with optional form-group classes

Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="textarea-with-page-heading">
    Full address
  </label>
  <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "textarea-with-page-heading",
  name: "address",
  label: {
    text: "Full address"
  },
  formGroup: {
    classes: "extra-class"
  }
}) }}

Textarea with autocomplete attribute

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-with-autocomplete-attribute">
    Full address
  </label>
  <textarea class="govuk-textarea" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  id: "textarea-with-autocomplete-attribute",
  name: "address",
  label: {
    text: "Full address"
  },
  autocomplete: "street-address"
}) }}

Textarea with spellcheck enabled

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-with-spellcheck-enabled">
    Spellcheck is enabled
  </label>
  <textarea class="govuk-textarea" id="textarea-with-spellcheck-enabled" name="spellcheck" rows="5" spellcheck="true"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  label: {
    text: "Spellcheck is enabled"
  },
  id: "textarea-with-spellcheck-enabled",
  name: "spellcheck",
  spellcheck: true
}) }}

Textarea with spellcheck disabled

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-with-spellcheck-disabled">
    Spellcheck is disabled
  </label>
  <textarea class="govuk-textarea" id="textarea-with-spellcheck-disabled" name="spellcheck" rows="5" spellcheck="false"></textarea>
</div>

Macro

{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  label: {
    text: "Spellcheck is disabled"
  },
  id: "textarea-with-spellcheck-disabled",
  name: "spellcheck",
  spellcheck: false
}) }}