Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

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

Open this example in a new tab: textarea

Copy code: textarea

Open this example in a new tab: textarea

Copy code: textarea

Open this example in a new tab: textarea

Copy code: textarea

Submit a request

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

Published 3 May 2024
Last updated 29 September 2025