Also known as:
A checkbox group contains checkbox fields that let people select zero or more options from a set.
Avatar (not built)
Badge (not built)
Button Group (not built)
Card (not built)
Date Picker (not built)
Divider (not built)
Illustration (not built)
Infinite Scroll (not built)
Loading Skeleton (not built)
Loading Spinner (not built)
Pagination (not built)
Tile (not built)
Need to know
Prefer vertical (stacked) checkboxes to easily scan and compare options.
When choices are mutually exclusive, use a radio instead.
For settings that are immediately applied, consider using a toggle switch instead.
To keep in mind
Show options in a sensible order, such as alphabetical, numeric.
Avoid long lists. Chunk long lists and group related options together.
The setting only applies when the user takes an action, such as clicking a save button. The rare exception is for filtering checkboxes, which apply instantly.
Use specific, clear, concrete labels.
Prefer vertical (stacked) checkbox fields to easily scan and compare options.
Offer a default option.
Interaction states guidelines for disabled elements
When to use and when not to use
When to use
Single choice options
Shown side-by-side or stacked
Where there is space to show them all at once
When not to use
Don’t use when there is more than 20 options.
When choices are mutually exclusive, use a
For settings that are immediately applied, consider using a
Here are some examples of other existing design systems:
Material: form fields
Polaris: choice list
© Culture Amp Pty Ltd
Link to Culture Amp site