Checkboxes

Checkboxes enable users to select one or more options from a visible list of options, and to toggle a single option on or off.

Examples

Interact with each example to see how it works.

When to use it

Use the checkboxes component when you need to help users:

• select one or more options from a list
• toggle a single option on or off.

When not to use it

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use radio buttons instead.

How it works

Checkboxes are grouped together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘Who are your providers?’.

If you are asking just one question per page, you can set the contents of the <legend> as the page heading. This is good practice because users of screen readers will only hear the contents once.

Always position each checkbox to the left of its label. This makes it easier to find, especially for users of screen magnifiers.

Unlike with radio buttons, users can select multiple checkboxes from a list. Do not assume that users will know how many checkboxes they can select based on only the visual difference between radio buttons and checkboxes.

If needed, add a hint to explain this, like ‘Select all that apply’.

Do not pre-select checkboxes as users are likely to:

• not realise they’ve missed a question
• submit the wrong answer.

Order checkbox labels alphabetically by default.

In some cases, pre-selected ordering can be helpful, such as listing options from the most to the least common. An example is ordering answers to the question ‘What is your nationality?’ based on population size.

Another example of pre-selected ordering is listing options chronologically. For example, you could order possible time periods for contact from earliest to latest, so users can select the periods that suit them best.

However, using pre-selected ordering could reinforce bias in your service, so use it with caution. If in doubt, order alphabetically.

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.