Page Loading

Checkbox

The checkbox component allows users to pick an option or options from a list by checking one or more boxes.

Example

How to use checkboxes

Use the checkboxes component when:

  • You want users to be able to select multiple options from a list
  • You want users to be able to confirm they’ve read or agree to something
  • There are less than 9 options to choose from
  • You’re able to pre-define the majority of the possible answers

You can add help text to this component to offer any extra information that users may need.  

If it’s not mandatory that users select any of the boxes, it’s best to include a ‘none of the above’ or similar option, rather than making the question non-mandatory. This makes sure users don’t miss it by accident.

You can also add an ‘other’ option, if you think users may need to enter a more bespoke answer.

Make sure the question you’re asking as well as the checkbox options are clear and easy to understand. 

When not to use this component

Do not use the checkboxes component if:

  • Users should only choose one option from a selection. In this case, use the radio buttons component.
  • You want to display more than 9 different options to select from. In this case, use the dropdown component. 

Error messages

Error messages for this component should usually start with ‘Select’. For example, ‘Select the types of funding you’ve already received’.

Error messages should follow our standard error message styling. Make it clear which field the error message relates to, and let the user know what they need to do to fix the error.

Adding a checkbox in the CMS

At the moment, the checkbox component isn’t available to add to any other panels or components via the CMS. If you need to add a checkbox to a page or an existing form like our enquiry form, speak to Louise Spence. 

Accessibility

Users must be able to tab through and select checkboxes using a keyboard only.

We use a custom style for checkboxes so that they're larger and easier to use than the standard checkboxes defined by a browser. We also use a custom style to make their focused and selected states clearer.

Checkboxes should only be stacked vertically. It will make tabbing through the checkboxes easier to follow. It also ensures better visibility of the options for screen magnifier users.