WIP – Best Practice: Should all textareas come with max-characters message?

{{ aspExample({ code: "<div class=\"form__group\" id=\"textarea-example-1\">
<label class=\"form__label\" for=\"textarea-example-1-textarea\">Description</label>
<textarea class=\"form__textarea\" id=\"textarea-example-1-textarea\" name=\"text-area\" rows=\"6\"></textarea>
</div>", nunjucks: "", title: "", id: "65a930c3a12d6", url: "" }) }}

Textarea input with hint

{{ aspExample({ code: "<div class=\"form__group\" id=\"textarea-example-2\">
<label class=\"form__label\" for=\"textarea-example-2-textarea\">Description</label>
<p class=\"form__hint\">Hint</p>
<textarea class=\"form__textarea\" id=\"textarea-example-2-textarea\" name=\"text-area\" rows=\"6\"></textarea>
</div>", nunjucks: "", title: "", id: "65a930c3a1352", url: "" }) }}

Textarea with submission error

{{ aspExample({ code: "<div class=\"form__group form__group–error\" id=\"textarea-example-3\">
<label class=\"form__label\" for=\"textarea-example-3-textarea\">Description</label>
<p class=\"form__error-message\">\"Description\" is required</p>
<textarea class=\"form__textarea form__textarea–error\" id=\"textarea-example-3-textarea\" name=\"text-area\" rows=\"6\"></textarea>
</div>", nunjucks: "", title: "", id: "65a930c3a1393", url: "" }) }}

Textarea with hint and submission error

{{ aspExample({ code: "<div class=\"form__group form__group–error\" id=\"textarea-example-4\">
<label class=\"form__label\" for=\"textarea-example-4-textarea\">Description</label>
<p class=\"form__hint form__hint–error\">Hint</p>
<p class=\"form__error-message\">\"Description\" is required</p>
<textarea class=\"form__textarea form__textarea–error\" id=\"textarea-example-4-textarea\" name=\"text-area\" rows=\"6\"></textarea>
</div>", nunjucks: "", title: "", id: "667013ee88b53", url: "" }) }}

Textarea with maximum characters

{{ aspExample({ code: "<div class=\"form__group\" id=\"textarea-example-max\">
<label class=\"form__label\" for=\"textarea-example-max-textarea\">Description</label>
<textarea class=\"form__textarea\" id=\"textarea-example-max-textarea\" name=\"text-area\" rows=\"6\" maxlength=\"3000\" data-countdown></textarea>
<p id=\"textarea-example-max-textarea-countdown\">You can enter up to 3000 characters</p>
</div>", nunjucks: "", title: "", id: "668d0493a85d4", url: "" }) }}

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

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: 6

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>'}
]
}
]
}) }}