Components Textarea
<div class="govuk-form-group">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<span id="more-detail-hint" class="govuk-hint">
Don’t include personal or financial information, eg your National Insurance number or credit card details.
</span>
<textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
name: "more-detail",
id: "more-detail",
label: {
text: "Can you provide more detail?"
},
hint: {
text: "Don’t include personal or financial information, eg your National Insurance number or credit card details."
}
}) }}You can configure this component using the Nunjucks macro arguments.
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
Don’t use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the text input component.
How it works
There are 2 ways to use the textarea component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<div class="govuk-form-group">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<span id="more-detail-hint" class="govuk-hint">
Don’t include personal or financial information, eg your National Insurance number or credit card details.
</span>
<textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
name: "more-detail",
id: "more-detail",
label: {
text: "Can you provide more detail?"
},
hint: {
text: "Don’t include personal or financial information, eg your National Insurance number or credit card details."
}
}) }}You can configure this component using the Nunjucks macro arguments.
Label textareas
You must label textareas. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.
Labels must be aligned above the textarea they refer to. They should be short, direct and written in sentence case. Don’t use colons at the end of labels.
Use appropriately-sized textareas
Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the rows attribute.
<div class="govuk-form-group">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<span id="more-detail-hint" class="govuk-hint">
Don’t include personal or financial information, eg your National Insurance number or credit card details.
</span>
<textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
</div>{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
name: "more-detail",
id: "more-detail",
rows: "8",
label: {
text: "Can you provide more detail?"
},
hint: {
text: "Don’t include personal or financial information, eg your National Insurance number or credit card details."
}
}) }}You can configure this component using the Nunjucks macro arguments.
Don’t disable copy and paste
Users will often need to copy and paste information into a textarea, so you shouldn’t prevent them from doing this.
Research on this component
If you’ve used this component, get in touch to share your user research findings.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk