Textarea
When to use this component
Use the textarea component when you need to let users enter an amount of text that's longer than a single line.
When not to use this component
Do not use the textarea component for single-line answers. In this case, you should use the text input component instead.
Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simpler ones using alternative components like radios.
How it works
Read the GOV.UK Design System guidance on textareas (opens in a new tab) for information on labels, sizing, and accessibility considerations.
If you need to limit the number of characters users can enter, use the character count component (opens in a new tab) which shows users how many characters they have remaining as they type.
HTML examples
Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.
Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.
For single question pages
If presenting only one question on the page, set the contents of the <label> as the page heading.
This is good practice as it means that users of screen readers will only hear the contents once.
You will need to include an empty {% title %} block in your web template to remove the default page header.
Textarea for single question
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Can you provide more detail?
</label>
</h1>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5"></textarea>
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Can you provide more detail?
</label>
</h1>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5"></textarea>
</div>
{% endblock %}For multiple question pages
If presenting more than one question on the page, do not set the contents of the <label> as the page heading.
Textarea for multiple questions
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
Can you provide more detail?
</label>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5"></textarea>
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<label class="govuk-label" for="schema-name">
Can you provide more detail?
</label>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5"></textarea>
</div>
{% endblock %}Using hint text
Use hint text for help that's relevant to the majority of users, like how their information will be used, or where to find it.
Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. Do not include links within hint text.
Textarea with hint
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Can you provide more detail?
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
Do not include personal or financial information, like your National Insurance number or credit card details.
</div>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5" aria-describedby="schema-name-hint"></textarea>
</div>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="schema-name">
Can you provide more detail?
</label>
</h1>
<div id="schema-name-hint" class="govuk-hint">
Do not include personal or financial information, like your National Insurance number or credit card details.
</div>
<textarea class="govuk-textarea" id="schema-name" name="schema-name" rows="5" aria-describedby="schema-name-hint"></textarea>
</div>
{% endblock %}Error messages
An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.
If nothing is entered and the question is required
'Enter [whatever it is]'. For example, 'Enter your feedback'.
If the input is too long
'[whatever it is] must be [number] characters or less'. For example, 'Your feedback must be 500 characters or less'.
If the input is too short
'[whatever it is] must be [number] characters or more'. For example, 'Your feedback must be 10 characters or more'.
If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.