Textarea

When to use this component

Use the textarea component when you need users to enter text that is longer than a single line, such as comments or descriptions.

When to not use this component

Do not use the textarea component if you need users to enter short answers that will fit on a single line. In this case, use the text input component.

How it works

All textareas must have visible labels aligned above the textarea they refer to. Labels should be short, direct and written in sentence case. Do not use colons at the end of labels.

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 specifying the rows attribute.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

For single question pages

If presenting only one question on the page, designate the contents of the label as the page heading. This practice ensures users of screen readers hear the contents only once.

You will need to include an empty {% title %} block in your web template to remove the default page header and avoid duplication.

For single question pages

Replace 'schema-name' by entering your CRM field schema name.

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

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% 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.

For multiple question pages

Replace 'schema-name' by entering your CRM field schema name.

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

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% 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 to provide relevant assistance to the majority of users, such as clarifying how their information will be used.

Using hint text

Do not include personal or financial information, like your National Insurance number or credit card details.

Replace 'schema-name' by entering your CRM field schema name.

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

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% 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, therefore you do not need to add any additional error containers to your HTML. Refer to the CRM helper framework guide to understand how to validate your front-end data.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.