Textarea examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: The id of the textarea.
- name: name
  type: string
  required: true
  description: The name of the textarea, which is submitted with the form data.
- name: rows
  type: string
  required: false
  description: Optional number of textarea rows (default is 5 rows).
- name: value
  type: string
  required: false
  description: Optional initial value of the textarea.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the textarea.
- name: autocomplete
  type: string
  required: false
  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, textarea will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the textarea.

default

Don’t include personal or financial information, eg your ID number or credit card details.

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don’t include personal or financial information, eg your ID number or credit card details."
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-a">Can you provide more detail?</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-a-hint" class="block text-neutral-dark">
    Don’t include personal or financial information, eg your ID number or credit card details.
  </p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-a" name="more-detail-a" rows="5" aria-describedby="more-detail-a-hint"></textarea>
</div>
<!-- /textarea -->

disabled

Don’t include personal or financial information, eg your ID number or credit card details.

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "disabled": true,
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don’t include personal or financial information, eg your ID number or credit card details."
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-b">Can you provide more detail?</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-b-hint" class="block text-neutral-dark">
    Don’t include personal or financial information, eg your ID number or credit card details.
  </p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-b" name="more-detail-b" rows="5" aria-describedby="more-detail-b-hint" disabled></textarea>
</div>
<!-- /textarea -->

with error message

Error: Error: You must provide an explanation

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Why can’t you provide a ID number?"
  },
  "errorMessage": {
    "text": "Error: You must provide an explanation"
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="no-ni-reason">Why can’t you provide a ID number?</label>
  
  <!-- /label -->
  <!-- error-message -->
  <p id="no-ni-reason-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: You must provide an explanation
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error" aria-errormessage="no-ni-reason-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

with default value

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "full-address-a",
  "name": "address-a",
  "value": "221B Baker Street\nLondon\nNW1 6XE\n",
  "label": {
    "text": "Full address"
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-a">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-a" name="address-a" rows="5">221B Baker Street
London
NW1 6XE
</textarea>
</div>
<!-- /textarea -->

with custom rows

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "full-address-b",
  "name": "address-b",
  "label": {
    "text": "Full address"
  },
  "rows": 8
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-b">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-b" name="address-b" rows="8"></textarea>
</div>
<!-- /textarea -->

with label as page heading

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "textarea-with-page-heading-a",
  "name": "address",
  "label": {
    "text": "Full address",
    "isPageHeading": true
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
      <h1 class="block "><label class="block" for="textarea-with-page-heading-a">Full address</label>
    </h1>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-page-heading-a" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->

with optional form-group classes

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "textarea-with-page-heading-b",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "formGroup": {
    "classes": "extra-class"
  }
})  }}

Markup

<!-- textarea -->
<div class="c-form-group extra-class">
  <!-- label -->
  <label class="block" for="textarea-with-page-heading-b">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-page-heading-b" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->

with autocomplete attribute

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "autocomplete": "street-address"
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="textarea-with-autocomplete-attribute">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
</div>
<!-- /textarea -->

placeholder

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "placeholder",
  "name": "placeholder",
  "label": {
    "text": "Value"
  },
  "placeholder": "This is a placeholder"
})  }}

Markup

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="placeholder">Value</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="placeholder" name="placeholder" rows="5" placeholder="This is a placeholder"></textarea>
</div>
<!-- /textarea -->

with custom classes applied

Inline label + flexible textarea and error message

Error: Error: Error message goes here

Show code

Macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
  },
  "label": {
    "text": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Error message goes here",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
})  }}

Markup

<!-- textarea -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-start lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Inline label:</label>
  
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" rows="5" aria-describedby="classes-applied-b-error" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->