Textarea

Textarea

Open this example in a new tab

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",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Textarea with hint

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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
}) }}