Forms: checkboxes and radio buttons
Checkboxes and radio buttons are form controls that help users select an answer to a question.
Please see the form template to get started with creating your own forms and error messages.
- A checkbox field consists of a label and the checkbox (selection) options.
- It can also consist of an information icon and accordion and an inline error message.
- A radio button consists of a label and the radio button (selection) options.
- It can also consist of an information icon and accordion and an inline error message.
There are 2 types of labels.
- In forms
- Anywhere a user would need to select one option (radio buttons) or multiple options (checkboxes) from a list of options.
- A checkbox can be used when there is only one option to choose from (ex: agree to the terms and conditions, turning on a setting).
- You can use checkboxes if there are more than 7 options for the user to choose from but this is not recommended. Consider asking more questions to filter down the number of options.
- Only use radio buttons when there are 7 or fewer options for the user to choose from. If there are more than 7 consider asking more questions to filter down the results or use a dropdown from field.
- See the Canada.ca guidelines for when not to use.
- On desktop, text for labels and options (per checkbox/radio button) can span 8 columns long (~60 characters with no spaces) or less.
- After 8 columns, press enter to break the text into 2 lines.
- For radio buttons the maximum amount of options you can provide is 7.
- Remove any additional options if you need less than this amount.
- Colours and styles should not be changed.
We altered checkboxes and radio buttons slightly from the canada.ca design system to match our other form elements such as text input fields. We also do not distinguish between larger checkboxes for forms and smaller checkboxes (tickboxes) for single items that can be checked, such as for confirmations. This was to maintain consistency within our forms.