Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Checkboxes

Updated in October 2026

Use checkboxes to let users select 1 or more options on a form.

Open this example in a new tab
How do you want to be contacted about this?
Select all options that are relevant to you

When to use checkboxes

Use checkboxes when you need to help users:

  • select more than 1 option from a list
  • toggle a single option on or off

When not to use checkboxes

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

How to use checkboxes

Position checkboxes to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Do not pre-select checkbox options as this makes it more likely that users will:

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

Order checkbox options alphabetically by default. In some cases, it's helpful to order them from most-to-least common options, for example, by population size. But be careful, as this can reinforce bias. If in doubt, order alphabetically.

Group checkboxes together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. The legend is usually a question, like "How do you want to be contacted about this?".

Error messages

Open this example in a new tab
How do you want to be contacted about this?
Select all options that are relevant to you

Error: Select how you want to be contacted

Use this style to show users when there is a problem with their checkbox selection and explain what they need to do to fix it.

Follow:

Accessibility

Users are not always notified when a conditionally revealed question is shown or hidden. This fails WCAG 2.2 Success Criterion 4.1.2 Name, Role, Value, level A.

However, GOV.UK research into conditionally revealed questions found that this was less of an issue when questions were simple and easy to understand. Complex questions are more likely to cause confusion for users.

Source

Learn more about Checkboxes in the GOV.UK Design System.

Back to top

Checkboxes variants

Inline checkboxes

Open this example in a new tab
Which nipple has changed?

Use inline checkboxes when users need to choose from only 2 options and both option labels are short. Displaying checkboxes horizontally can reduce the amount of space needed and make related options easier to compare.

Do not use inline checkboxes if:

  • there are more than 2 options
  • either option label is long or may wrap onto multiple lines

On small screens, such as mobile devices, inline checkboxes automatically stack on top of each other (vertically) to maintain readability and usability.

Checkboxes with hint text

Checkbox items with hints

Open this example in a new tab
What medical conditions do you have?
Select 1 or more
including type 1, type 2, and gestational diabetes

Unlike with radios, users can select more than 1 option from a list of checkboxes. Do not assume that users will know how many options they can select.

Use hint text to give users help in context. For example, say "Select all the options that are relevant to you". Read more about hint text.

You can add hints to checkbox items to provide additional information about the options.

Add an option for "none"

Open this example in a new tab
Do you have any of these symptoms?
Select all the symptoms you have
or

You can give users the option to say none of the other options apply to them.

This option means users need to actively select "none" rather than leave all the boxes unchecked, which makes sure they do not skip the question by accident.

Remember to start by asking 1 question per page. You might be able to remove the need for a "none" option by asking the user a better question or by using filter questions to filter users out beforehand.

Show the "none" option last. Separate it from the other options using a divider, normally the word "or".

Write a label that repeats the key part of the question. For example, for the question "Do you have any of these symptoms?", say "No, I do not have any of these symptoms". Avoid phrases like "none of the above" because this is a visual reference and might be hard for people who use screen readers to understand.

To enable some JavaScript that unchecks all other checkboxes when the user clicks "none", add the data-checkbox-exclusive behaviour to the "none" checkbox.

If JavaScript is unavailable, and a user selects both the "none" checkbox and another checkbox, display an error message.

Conditionally revealing a related question

Open this example in a new tab
How do you want to be contacted about this?
Select all options that are relevant to you

You can add a conditionally revealing related question to checkboxes, so users only see the question when it's relevant to them.

For example, you could reveal a phone number input only when a user chooses to be contacted by phone.

Keep it simple. If you need to add a lot of content, consider showing it on the next page in the process instead.

Only conditionally reveal questions. Do not show or hide anything that is not a question.

Smaller checkboxes

Open this example in a new tab
Care setting

Use standard-sized checkboxes in most cases.

You can use small checkboxes where you need something less visually prominent. For example, on:

  • a page of search results where users need to see and change search filters without distracting them from the results
  • information-dense screens in services designed for repeat use, like staff-facing systems

Back to top

Examples

Welsh Immunisation System (WIS)

This example is from the School-age Immunisations service within WIS. It shows a set of checkboxes that allow users to select 1 or more options from a list as part of a multi-page form.

Year group checkboxes for a MenACWY and Td/IPV session

Back to top