Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage Guidelines
Single Checkbox
Checkbox Group Form Field
Checkbox Nested Group Form Field
Checkbox vs Radio Button
Radio buttons let you choose only one option from a list of choices, ensuring exclusivity, while checkboxes allow multiple selections. If your situation requires only one choice from a group, opt for Radio Buttons instead of checkboxes.
Do
Do use radio buttons when only one item can be selected.
Don't
Don't use checkbox if only one item can be selected.
Checkbox vs Toggle
Checkboxes should be used when a selection needs to be made. The selection can be singular or multiple. A Toggle is used when activation is involved—the activation should also be instantaneous. A checkbox should be used if the selection needs to be saved in an additional step.
Do
Because this single option is a selection, a checkbox should be used.
Don't
This single option does not involve anything being activated, which means a toggle should not be used.
Do
This list presents several selection options, which should therefore use checkboxes.
Don't
The list of options do not involve activation, which mean toggles should not be used.
Nested checkboxes are preferable to Toggles when users must select multiple related options from a list. They effectively group similar items visually and occupy less space compared to toggles.
Do
Checkboxes enable users to choose one or multiple options from a list. A nested checkbox facilitates effortless selection or deselection of all items.
Don't
When dealing with a list of multiple options, avoid using toggles. Opt for checkboxes instead. Checkboxes suggest a relationship between items and conserve visual space.
Limit the Number of Checkboxes in the Group
This will help reduce the user’s cognitive load and anxiety. If you have more than six items, opt for a Multi-select Dropdown.
Do
Do use multi-select dropdown if you need to save space or have more than 6 option items.
Don't
Don't use checkbox group if you have more than 6 option items.