Textarea examples
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.
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.
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
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
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
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
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
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
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
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
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 -->