ASP Digital Design System

Textarea

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

Open this example in a new tab: textarea

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

Textarea input with hint

Open this example in a new tab: textarea

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

Textarea with submission error

Open this example in a new tab: textarea

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

Textarea with hint and submission error

Open this example in a new tab: textarea

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

Textarea with maximum characters

Open this example in a new tab: textarea

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

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

Published 3 May 2024
Last updated 9 December 2024