Textarea

Textarea

(open in a new window)

Code

Markup

<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&#39;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>

Macro

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

Textarea with error message

(open in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="no-ni-reason">
    Why can&#39;t you provide a National Insurance number?
  </label>
  <span id="no-ni-reason-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> You must provide an explanation
  </span>
  <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 "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 in a new window)

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 "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 in a new window)

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 "textarea/macro.njk" import govukTextarea %}

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

Textarea with label as page heading

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" 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 "textarea/macro.njk" import govukTextarea %}

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

Textarea with optional form-group classes

(open in a new window)

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 "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 in a new window)

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 "textarea/macro.njk" import govukTextarea %}

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