Textarea

When to use a textarea

Use the textarea component when you need to let users enter an amount of text that is longer than a single line.

When not to use a textarea

Do not use a textarea if users only need to enter short information, use a text input instead.

How textareas work

Height and width

By default, the textarea can show four lines of text and the width fills the container.

If a user enters more text than can be displayed, then the textarea becomes scrollable. Users can change the height of a textarea by dragging the bottom right-hand corner of the component.

<div class="p-form__form-group">
  <label class="p-form__label" for="textarea-standard">Label</label>
  <textarea
    name="textarea-standard"
    id="textarea-standard"
    class="p-form__textarea"
  ></textarea>
</div>

Hint text

Textareas can display hint text. Use hint text when you need to give users guidance on how to input content correctly.

Using hint text is optional.

See how to write hint text further down this page for best practice guidance.

<div class="p-form__form-group">
  <label class="p-form__label" for="textarea-hint">Label</label>
  <span class="p-form__hint">Hint text</span>
  <textarea
    name="textarea-hint"
    id="textarea-hint"
    class="p-form__textarea"
  ></textarea>
</div>

Error messages

Textareas can display an error message. It appears below the <label> or hint text. This creates a clear link between the error and:

• what is being asked
• any guidance on what information is required
• how to enter the information

Only display error messages after a user submits the form or clicks to continue to the next step. Do not validate inputs as users are typing as it can cause stress and frustration.

See how to write error text further down this page for best practice guidance.

<div class="p-form__form-group">
  <label class="p-form__label" for="textarea-error">Label</label>
  <span class="p-form__hint">Hint text</span>
  <span class="p-form__error">Error message text</span>
  <textarea 
    name="textarea-error"
    id="textarea-error"
    class="p-form__textarea p-form__input--error"
  ></textarea>
</div>

If your product is already handling errors in a different way

If you work in Parliament and need advice on presenting errors in this way, contact the Improving User Experience team on the #design-system Slack channel.

How to use text inputs

Update the relevant fields

To create a clear and accessible relationship between the <label> and the input:

• you must use the <label> element to clearly associate text with the input
• the for attribute of the <label> must exactly match the id of the input
• the id used for the <label> must also be unique from other form elements on the page

Adjusting the height and width

You can alter the height of the textarea so that it is the right size for the information users are likely to enter.

The textarea should fill the full width of the container. This will give users the maximum amount of space to enter information.

If filling the width of the container means the text will exceed a line length of 80 characters, then you can limit the width. This can make it easier for users to read the information in the input.

Do not disable copy and paste

Allow users to copy and paste information into a text input as this can make it easier to complete a form.

Do not use placeholder text

Do not use placeholder text in place of a <label> or hint text as:

• not all screen readers will read it out
• it disappears when a user selects the input making it hard for them to remember what it said

Do not use the disabled state attribute

Do not use the disabled state attribute as it can cause issues for users. Disabled inputs are often not distinguishable from active ones, and they do not tell users why they cannot interact with them.

Instead, allow users access to all inputs, even if that means that after trying to submit or continue with a form it fails. Use error messages to then help users understand what they need to do to fix the problem. Using error messages also follows best practice guidance for creating accessible interfaces.

If users must submit information in a specific order, consider using a multistep form.

Displaying previously submitted information

Do not use the disabled state to display previously submitted information. This can confuse users as they may not realise that they cannot change the information.

Instead, consider displaying the information as standard text.

How to write hint text

Keep hint text to a single short sentence, without any full stops.

Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

How to write error text

Error messages must explain what went wrong and how to fix it.

Make sure to follow the error message guidance or use the specific error messages below to help your users.

Specific error messages for specific error states

If the input is empty

Say ‘Enter [whatever it is]’.

For example, ‘Enter summary’.

If the input is too long

Say ‘[whatever it is] must be [number] characters or fewer’.

For example, ‘Summary must be 400 characters or fewer’.

If the input is too short

Say ‘[whatever it is] must be [number] characters or more’.

For example, ‘Summary must be 10 characters or more’.

If the input has both a minimum and maximum length

Say ‘[whatever it is] must be between [number] and [number] characters’.

For example, ‘Summary must be between 10 and 400 characters’.

If the input uses characters that are not allowed and you know what the characters are

Say ‘[whatever it is] must not include [characters]’.

For example, ‘Summary must not include ~ and ^’.

Support all the characters the user might need to enter, including numbers and symbols.

If the input uses characters that are not allowed and you do not know what the characters are

Say ‘[whatever it is] must only include [list of allowed characters]’.

For example, ‘Summary must only include letters a to z, hyphens, spaces, and apostrophes.

Support all the characters the user might need to enter, including numbers and symbols.