Skip to content

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Textarea

<div class="asp-form__group" id="change-textarea-default">
  <label class="asp-form__label" for="textarea-default">Description</label>
  <textarea class="asp-form__input asp-form__textarea" id="textarea-default" name="textarea-default"  rows="4" autocomplete="false" spellcheck="off" maxlength="500" data-countdown></textarea>
  <p id="textarea-default-countdown">You can enter up to 500 characters</p>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-default", label: "Description", name: "textarea-default" }) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-default", label: "Description", name: "textarea-default" }) }}

When JavaScript is enabled, the message should be “You have XX characters remaining”. This will react to interactions / prepopulated content on page load. Default (JavaScript disabled) message “You can enter up to XX characters”.

Textarea input with hint

<div class="asp-form__group" id="change-textarea-example-2">
  <label class="asp-form__label" for="textarea-example-2">Description</label>
  <p class="asp-form__hint">hint</p>
  <textarea class="asp-form__input asp-form__textarea" id="textarea-example-2" name="textarea-example-2"  rows="4" autocomplete="false" spellcheck="off" maxlength="500" data-countdown></textarea>
  <p id="textarea-example-2-countdown">You can enter up to 500 characters</p>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-2", label: "Description", hint: "hint" }) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-2", label: "Description", hint: "hint" }) }}

Textarea with submission error

<div class="asp-form__group asp-form__group--error asp-form__js-group--error" id="change-textarea-example-3">
  <label class="asp-form__label" for="textarea-example-3">Description</label>
  <p class="asp-form__error-message asp-form__js-error-message">
    <span class="asp-form__js-error-message--intial">&quot;Description&quot; is required</span>
    <span class="asp-form__js-error-message--live"></span>
  </p>
  <textarea class="asp-form__input asp-form__textarea asp-form__input--error asp-form__js-input--error" id="textarea-example-3" name="textarea-example-3"  rows="4" autocomplete="false" spellcheck="off" maxlength="500" data-countdown></textarea>
  <p id="textarea-example-3-countdown">You can enter up to 500 characters</p>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-3", label: "Description", error: ""Description" is required", name: "textarea-example-3" }) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-3", label: "Description", error: ""Description" is required", name: "textarea-example-3" }) }}

Textarea with hint and submission error

<div class="asp-form__group asp-form__group--error asp-form__js-group--error" id="change-textarea-example-4">
  <label class="asp-form__label" for="textarea-example-4">Description</label>
  <p class="asp-form__hint">hint</p>
  <p class="asp-form__error-message asp-form__js-error-message">
    <span class="asp-form__js-error-message--intial">&quot;Description&quot; is required</span>
    <span class="asp-form__js-error-message--live"></span>
  </p>
  <textarea class="asp-form__input asp-form__textarea asp-form__input--error asp-form__js-input--error" id="textarea-example-4" name="textarea-example-4"  rows="4" autocomplete="false" spellcheck="off" maxlength="500" data-countdown></textarea>
  <p id="textarea-example-4-countdown">You can enter up to 500 characters</p>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-4", label: "Description", hint: "hint", error: ""Description" is required", name: "textarea-example-4" }) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-4", label: "Description", hint: "hint", error: ""Description" is required", name: "textarea-example-4" }) }}

Textarea read only

WIP -- Not just adding the readonly attribute but the className .form__textarea--readonly

<div class="asp-form__group" id="change-textarea-example-5">
  <label class="asp-form__label" for="textarea-example-5">Description</label>
  <p class="asp-form__hint">hint</p>
  <textarea class="asp-form__input asp-form__textarea asp-form__input--readonly" id="textarea-example-5" name="textarea-example-5"  rows="4" readonly>Suspect A was seen...</textarea>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-5", label: "Description", hint: "hint", name: "textarea-example-5", readonly: true, value: "Suspect A was seen..." }) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the texraea. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the textarea that explains its purpose.
hint string A more explicit descriptive text associated with the textarea that explains what kind of information is expected.
error string The descriptive text associated with the textarea that explains any errors. If the textarea is readonly, this will be ignored.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the textarea.
rows integer The number of rows for the textarea. Default value is 4.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
readonly string If dataRegex and dataName are populated, this attribute will be ignored. If this is present, the following parameters - autocomplete, spellchecker and maxlength will be ignored.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
maxlength interger or false (boolean) This is the number of characters for the textarea remaining. Default values are null (500) or 'false' removes the maxlength and countdown feature.
required boolean Sets wheather the textarea has an html5 required attribute. If the textarea is readonly, this attribute will be ignored.
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null.
{% from "components/textarea/macro.njk" import aspTextarea %}

{{ aspTextarea({ id: "textarea-example-5", label: "Description", hint: "hint", name: "textarea-example-5", readonly: true, value: "Suspect A was seen..." }) }}

WIP -- Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.

When to use this component

When there is a large amount of textual content.

This component can be added within a conditional question.

WIP -- Default amount of of rows: 4

When not to use this component

Use a text input if the field should be one single line.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version In Progress
Figma version Not started
M365 versions Not started
Documentation In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.


Published 3 May 2024
Last updated 24 October 2025