Checkboxes

When to use checkboxes

Use checkboxes when you need to let users select one or more options from a list.

You can also use checkboxes to let users toggle an option on or off. For example, letting users agree to terms and conditions of a service.

When not to use checkboxes

Do not use checkboxes if users can only select one option from a list, use radio buttons instead.

How checkboxes work

Checkboxes contain an input (the square) and a <label> (the text). Users can click both the input and the <label> to select an option.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <div class="p-form__checkbox-group">
    <div class="p-form__checkbox-item">
      <input
        type="checkbox"
        name="checkbox-standard-1"
        id="checkbox-standard-1"
      />
      <label for="checkbox-standard-1" class="p-form__checkbox-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__checkbox-item">
      <input
        type="checkbox"
        name="checkbox-standard-2"
        id="checkbox-standard-2"
      />
      <label for="checkbox-standard-2" class="p-form__checkbox-item-label">
        Option 2
      </label>
    </div>
  </div>
</fieldset>

Hint text

Checkbox groups can display hint text. Use hint text when you need to help users understand the options.

Using hint text is optional.

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

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <span class="p-form__hint">Hint text</span>
  <div class="p-form__checkbox-group">
    <div class="p-form__checkbox-item">
      <input type="checkbox" name="checkbox-hint-1" id="checkbox-hint-1" />
      <label for="checkbox-hint-1" class="p-form__checkbox-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__checkbox-item">
      <input type="checkbox" name="checkbox-hint-2" id="checkbox-hint-2" />
      <label for="checkbox-hint-2" class="p-form__checkbox-item-label">
        Option 2
      </label>
    </div>
  </div>
</fieldset>

Error messages

Checkbox groups can display an error message. It appears below the <legend> 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.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <span class="p-form__hint">Hint text</span>
  <span class="p-form__error">Error message text</span>
  <div class="p-form__checkbox-group">
    <div class="p-form__checkbox-item">
      <input type="checkbox" name="checkbox-error-1" id="checkbox-error-1" />
      <label for="checkbox-error-1" class="p-form__checkbox-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__checkbox-item">
      <input type="checkbox" name="checkbox-error-2" id="checkbox-error-2" />
      <label for="checkbox-error-2" class="p-form__checkbox-item-label">
        Option 2
      </label>
    </div>
  </div>
</fieldset>

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 checkboxes

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

You must wrap a group of radio buttons in a <fieldset> and provide a <legend> to describe the group of inputs. This groups the checkboxes together.

If you only need to use one checkbox then you do not need to include the <fieldset> and <legend>.

<div class="p-form__form-group">
  <div class="p-form__checkbox-group">
    <div class="p-form__checkbox-item">
      <input type="checkbox" name="checkbox-single" id="checkbox-single" />
      <label for="checkbox-single" class="p-form__checkbox-item-label">
        I agree to the terms and conditions
      </label>
    </div>
  </div>
</div>

Layout and arrangement

You must arrange checkboxes in a vertical list. This makes it easier for users to scan the list of options. Never arrange them in a horizontal layout.

Arrange them in alphabetical order unless you have research that supports using a different order. Arrange them in numerical order if the options contain numbers.

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.

Do not assume that users will know that they can select more than one option. If needed, add a hint explaining this, for example, ‘Select all that apply’.

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 nothing is selected and the question has options in it

Say ‘Select if [whatever it is]’.

For example, ‘Select if you want to subscribe to the House of Commons, House of Lords or PDS newsletters’.

If nothing is selected and the question does not have options in it

Say ‘Select [whatever it is]’.

For example, ‘Select which newsletters you want to subscribe to’.

If users check both a ‘none’ checkbox and another checkbox

Say ‘Select [option label text] or select ‘[none of the above label text]’.

For example, ‘Select the newsletters you want to subscribe to, or select ‘No, I do not wish to subscribe to any newsletters’.