{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a930c3a12d6" }) }}

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

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "hint", id: "65a930c3a1352" }) }}

Textarea with submission error

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "submission-error", id: "65a930c3a1393" }) }}

Textarea with hint and submission error

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "hint-submission-error", id: "667013ee88b53" }) }}

Textarea read only

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

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "read-only", id: "67925534c8f8b" }) }}

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.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–yellow">In Progress</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}