Overview

Checkbox

Checkboxes allow for multiple selections in a list. They're commonly used in forms, filters, and terms and conditions.

Checkbox

Usage

When to use
Use checkboxes when users can select one or more options in a list. We also add confirmation buttons when there are settings or terms that require user approval or agreement before submission.
Checkbox types
Usage
Without container
Use a checkbox without a container for simpler selections that don't feature a lot of label content.
With container
Use a checkbox with container when you want to clearly separate the options, or when you have longer content that needs separation. Checkbox with container can also be used in multifield forms for layout consistency.
How best to use
Do
If you have a lot of options to present, use section headers to divide the list into smaller subsections.
Do
Add a confirmation button when the user needs to approve or agree to terms and conditions before submission.
Caution
Use nestled checkboxes only when there's a clear parent-child relationship in your grouping.
When not to use
Don't use it as a switch
If the selected state needs to be applied immediately, consider using a switch instead.
⁠
Don't use it if only one option can be selected out of a list
Radios or dropdowns are best suited for these scenarios.
Component comparison table
Component
Usage
Number of options
Checkbox
Use for selecting one or more options out of a list of independent, always visible options.
Commonly used for one to 6 options. If you have many options, consider organising them into subsections for easy reading.
Radio
Use for selecting one option out of a list of mutually exclusive, always visible options.
Commonly used for 2 to 6 options. Unsuitable for too many options.
Chip
Use when selecting one or more short options, stacked horizontally.
Commonly used for at least 2 and up to 9 options.
Switch
Use for toggling between 2 opposing states like a digital switch. Best for adjusting settings.
For 2 built-in, opposing options.
Dropdown
Use when selecting one or more options out of a list that expands when users interact with it.
When there's one or more options. Commonly used for scenarios with more than 6 options.