Skip to content
ASP Digital Design System

Textarea

Open this example in a new tab: textarea

Copy code: 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" maxlength="3000" data-countdown></textarea>  
  <p id="textarea-example-1-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 react to interactions / prepopulated content on page load. Default (JavaScript disabled) message “You can enter up to XX characters”.

Textarea input with hint

Open this example in a new tab: textarea

Copy code: 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" maxlength="3000" data-countdown></textarea>  
  <p id="textarea-example-2-textarea-countdown">You can enter up to 3000 characters</p>  
</div>

Textarea with submission error

Open this example in a new tab: textarea

Copy code: 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__error-message">"Description" is required</p>  
  <textarea class="form__textarea form__textarea--error" id="textarea-example-4-textarea" name="text-area" rows="4" maxlength="3000" data-countdown></textarea>  
  <p id="textarea-example-4-textarea-countdown">You can enter up to 3000 characters</p>  
</div>

Textarea with hint and submission error

Open this example in a new tab: textarea

Copy code: 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">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" maxlength="3000" data-countdown></textarea>  
  <p id="textarea-example-4-textarea-countdown">You can enter up to 3000 characters</p>  
</div>

Textarea read only

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

Open this example in a new tab: textarea

Copy code: textarea

<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" readonly></textarea>  
</div>

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

Submit a request

Request a change or addition to the design system use this form.

Published 3 May 2024
Last updated 3 July 2025