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=\"4\"></textarea>
</div>", nunjucks: "", json: "", title: "", example: "", id: "65a930c3a12d6" }) }}
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=\"4\"></textarea>
</div>", nunjucks: "", json: "", title: "", example: "", id: "65a930c3a1352" }) }}
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=\"4\"></textarea>
</div>", nunjucks: "", json: "", title: "", example: "", id: "65a930c3a1393" }) }}
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=\"4\"></textarea>
</div>", nunjucks: "", json: "", title: "", example: "", id: "667013ee88b53" }) }}
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=\"4\" maxlength=\"3000\" data-countdown></textarea>
<p id=\"textarea-example-max-textarea-countdown\">You can enter up to 3000 characters</p>
</div>", nunjucks: "", json: "", title: "", example: "", id: "668d0493a85d4" }) }}
Textarea read only
WIP – Not just adding the readonly attribute but the className .form__textarea–readonly
{{ aspExample({ code: "<div class=\"form__group\" id=\"textarea-example-readonly\">
<label class=\"form__label\" for=\"textarea-example-readonly-textarea\">Description</label>
<textarea class=\"form__textarea form__textarea–readonly\" id=\"textarea-example-readonly-textarea\" name=\"text-area\" rows=\"4\"></textarea>
</div>", nunjucks: "", json: "", title: "", example: "", id: "67925534c8f8b" }) }}
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”.
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>'}
]
}
]
}) }}