Form elements - Textarea

Use textarea to let users enter more than 1 line of text.

Open this default textarea example in new window
Copy default textarea code 
<div class="hs2-form-group">
  <label class="hs2-label" for="example">
    Can you provide more detail?
  </label>
  <div class="hs2-hint" id="example-hint">
    Do not include personal or financial information, for example, your National Insurance number or credit card details.
  </div>
  <textarea class="hs2-textarea" id="example" name="example" rows="5" aria-describedby="example-hint"></textarea>
</div>
Close default textarea code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default textarea
Name Type Required Description
Name id Type string Required true Description The id of the textarea.
Name name Type string Required true Description The name of the textarea, which is submitted with the form data.
Name rows Type string Required false Description Optional number of textarea rows (default is 5 rows).
Name value Type string Required false Description Optional initial value of the textarea.
Name describedBy Type string Required false Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label Type object Required true Description Options for the label component.
Name hint Type object Required false Description Options for the hint component.
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name autocomplete Type string Required false Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name classes Type string Required false Description Classes to add to the textarea.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the textarea.
Copy default textarea code 
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "example",
  "id": "example",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Do not include personal or financial information, for example, your National Insurance number or credit card details."
  }
}) }}
Close default textarea code

When to use textarea

Use textarea when you want users to enter an amount of text that’s longer than a single line.

When not to use textarea

Users can find open-ended questions difficult to answer. It's usually better to break up 1 complex question into a series of simple ones, for example where users can select from options using radios.

If you need to ask an open question

Do not use textarea if you want users to enter single line answer, such as a phone number or name. In this case, you should use text input.

How to use textarea

Label textareas

You must label textareas.

Do not use placeholder text for a label, as it disappears when users click inside the textarea.

Align labels 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.

Use the right size of textarea

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.

Open this longer textarea example in new window
Copy longer textarea code 
<div class="hs2-form-group">
  <label class="hs2-label" for="example-longer">
    Can you provide more detail?
  </label>
  <div class="hs2-hint" id="example-longer-hint">
    Do not include personal or financial information, for example, your National Insurance number or credit card details.
  </div>
  <textarea class="hs2-textarea" id="example-longer" name="example-longer" rows=" 10 " aria-describedby="example-longer-hint"></textarea>
</div>
Close longer textarea code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for longer textarea
Name Type Required Description
Name id Type string Required true Description The id of the textarea.
Name name Type string Required true Description The name of the textarea, which is submitted with the form data.
Name rows Type string Required false Description Optional number of textarea rows (default is 5 rows).
Name value Type string Required false Description Optional initial value of the textarea.
Name describedBy Type string Required false Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label Type object Required true Description Options for the label component.
Name hint Type object Required false Description Options for the hint component.
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name autocomplete Type string Required false Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name classes Type string Required false Description Classes to add to the textarea.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the textarea.
Copy longer textarea code 
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "example-longer",
  "id": "example-longer",
  "rows": "10",
  "label": {
      "text": "Can you provide more detail?"
  },
  "hint": {
      "text": "Do not include personal or financial information, for example, your National Insurance number or credit card details."
  }
}) }}
Close longer textarea code

Using hint text

Use hint text to give users help in context, for example, tell users what information to include or not to include.

Do not disable copy and paste

Users will often need to copy and paste information into a textarea, so do not stop them doing this.

Error messages

Style error messages like this.

Open this error textarea example in new window
Copy error textarea code 
<div class="hs2-form-group hs2-form-group--error">
  <label class="hs2-label" for="example-error">
    Why can&#39;t you provide a National Insurance number?
  </label>
  <span class="hs2-error-message" id="example-error-error">
    <span class="hs2-u-visually-hidden">Error:</span> You must provide an explanation.
  </span>
  <textarea class="hs2-textarea hs2-textarea--error" id="example-error" name="example-error" rows="5" aria-describedby="example-error-error"></textarea>
</div>
Close error textarea code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for error textarea
Name Type Required Description
Name id Type string Required true Description The id of the textarea.
Name name Type string Required true Description The name of the textarea, which is submitted with the form data.
Name rows Type string Required false Description Optional number of textarea rows (default is 5 rows).
Name value Type string Required false Description Optional initial value of the textarea.
Name describedBy Type string Required false Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label Type object Required true Description Options for the label component.
Name hint Type object Required false Description Options for the hint component.
Name errorMessage Type object Required false Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name autocomplete Type string Required false Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name classes Type string Required false Description Classes to add to the textarea.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the textarea.
Copy error textarea code 
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "example-error",
  "id": "example-error",
  "label": {
    "text": "Why can't you provide a National Insurance number?"
  },
  "errorMessage": {
    "text": "You must provide an explanation."
  }
}) }}
Close error textarea code

Follow: