Checkboxes

Skip to HTML examples

When to use this component

Use the checkboxes component to assist users in selecting multiple options from a list or toggling a single option on or off.

If required, you can use custom script to associate records where each checkbox selection refers to a parent-child or many-to-many relationship record.

When not to use this component

Avoid using the checkboxes component if users can only choose one option from a selection. Instead, use the radios component.

How it works

Read the GOV.UK Design System guidance on checkboxes (opens in a new tab) for information on ordering options, hint text, and accessibility considerations.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

For single question pages

If presenting only one question on the page, designate the contents of the legend 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

Which types of waste do you transport?

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

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which types of waste do you transport?
      </h1>
    </legend>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</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">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which types of waste do you transport?
      </h1>
    </legend>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</div>

{% endblock %}

For multiple question pages

If presenting more than one question on the page, do not set the contents of the legend as the page heading.

For multiple question pages

Which types of waste do you transport?

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

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">
      Which types of waste do you transport?
    </legend>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-1">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</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">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">
      Which types of waste do you transport?
    </legend>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-1">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</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 or where to locate it. The hint text block is demonstrated in the example below.

Please ensure the following:

• Use the hint text block appropriately
• Place the hint block correctly within your HTML component
• Add the aria-describedby attribute where necessary, for accessibility. For checkboxes this is against the fieldset.

Avoid lengthy paragraphs and lists in hint text, as screen readers will read out the entire content, potentially frustrating users. Additionally, refrain from including links within hint text, as screen readers do not indicate that the text is a clickable link.

Checkbox with hint

Which types of waste do you transport?

Select all that apply.

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

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which types of waste do you transport?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      Select all that apply.
    </div>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</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">
  <fieldset class="govuk-fieldset" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which types of waste do you transport?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      Select all that apply.
    </div>
    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-1" name="schema-name" type="checkbox" value="carcasses">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name">
          Waste from animal carcasses
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-2" name="schema-name" type="checkbox" value="mines">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-2">
          Waste from mines or quarries
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="schema-name-3" name="schema-name" type="checkbox" value="farm">
        <label class="govuk-label govuk-checkboxes__label" for="schema-name-3">
          Farm or agricultural waste
        </label>
      </div>
    </div>
  </fieldset>
</div>

{% endblock %}

Additional examples

Additional examples can be found on the GOV.UK Design System:

• Add an option for 'none'
• Conditionally revealing a related question
• Smaller checkboxes

These examples will eventually be incorporated into this guidance, demonstrating how to use each of these additional examples with Power Pages. If you require assistance in the interim to adapt these additional examples for use with Power Pages and the CRM helper framework, please contact the Solutions Delivery Team.

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.

If nothing is selected and the question is required

'Select [whatever it is]'. For example, 'Select which types of waste you transport'.

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