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.
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">"Description" 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">"Description" 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