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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: 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”.

Open this example in a new tab: textarea

<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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: textarea

<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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: textarea

<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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: textarea

<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