Using a checkbox

Checkboxes allow website visitors to select one or more independent choices from a range of options.

When you should use a checkbox

• For standard pages, webforms and templates like events 
• When selection doesn’t cause an immediate effect, and requires an additional call to action (CTA)
• When none, some or all the options can be selected 

When you should avoid using a checkbox

• When only one option (out of many) can be selected, use a radio box instead
• When a selection requires an immediate effect, consider a toggle instead

Guidelines

Do:

• Start all checkbox labels with a capital letter
• Keep checkbox labels short and descriptive
• Should be accompanied with a CTA button to trigger an action (E.g. ‘Apply Filter’ for filters, or ‘Submit’ to complete a form)

Don't:

• Don't include punctuation after checkbox labels
• Don’t vertically center checkbox inputs with their respective labels. Ensure the first line is vertically centered with the checkbox and positioned to the right of their inputs

Component breakdown

Checkbox input: The area where a user can make a selection

• Amount of selections allowed: unlimited or specified number
• Display:
  • 1 column
  • 2 columns
  • 3 columns
  • Side by side
  • Buttons
• Can be disabled
• Can be prepopulated from data
• Accessibility: The role is 'checkbox'
• Mandatory

Label: Communicates the context of the checkbox(es)

• Text of the title
• Include all of above/none of the above options
• Accessibility: Checkboxes are included in an element with role group that has the property aria-labelledby set to the ID of the element containing the label.
• Conditional
  • Mandatory for all checkboxes except for single checkbox

Check: Indicates that the option has been selected

• Accessibility: When checked, state aria-checked set to true
• Mandatory

Checkbox label: Describes the information to select / deselect

• Custom or predefined options
• Accessibility: Can be done in one of the following ways:
  • Visible text content contained within the element with role checkbox.
  • A visible label referenced by the value of aria-labelledby set on the element with role checkbox.
  • aria-label set on the element with role checkbox.
• Mandatory

Description: Helper text for the checkbox label

• Text of description

Validation: Lets the user know if there is an issue with, and what they will need to do to fix it

• Mandatory

Mandatory: Indicate whether or not at least one value in the checkbox(es) needs to be selected

• Mandatory or optional

Types

Single Checkbox: Used to confirm a user's selection or preference like agreeing to terms and conditions or registering for an option

Checkbox List: Provide the user with a list of available items to choose from. Checkbox lists are used where multiple selections are permitted.

Multi Select Dropdown: Checkboxes that are contained within a drop down.

• If only one option is shown, then the label of the option is shown within the dropdown
• If more than one option is shown, then the number of options selected is shown within the dropdown

Expanding Checkboxes: Ability to show and hide checkboxes when there are a lot of options.

Mandatory: At least one option needs to be selected

Other Checkbox Option: Ability for the user to enter another option that’s not available or shown

States

Default: The default state of how a checkbox should look

• Accessibility: When unchecked, state aria-checked set to false
  

Hovered: When a mouse hovers over the checkbox, the colour changes to indicate that an action can be taken

Selected: When the checkbox is selected, the colour and tick icon is shown to indicate that the option is selected

• Accessibility: When checked, state aria-checked set to true

Focus: When a keyboard user tabs through or clicks on a checkbox, there should be an additional border to show where they are on the screen

• Accessibility: When the checkbox is focused, hitting the ‘Space’ key will change the state of the checkbox (i.e. default to selected, or vice versa)
• Focus of the checkbox is moved forward when the ‘Tab’ key is used
• Focus of the checkbox is moved backwards when the ‘shift-tab’ key is used

Error: For a single checkbox, the border is red with an accompanying error message. For a checkbox list, the borders remain the same, but an error message is shown for the entire group

Disabled: Checkbox cannot be selected by a user

• Accessibility: When checked, state aria-checked set to disabled

Need any more help?

If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.