Guidelines
Guidelines
Usage
A Checkbox appears inside a group when a selection from a category of multiple choices is desired.
A Checkbox Group should:
- Have less than 6 options that are mutually inclusive. If there are more options, consider using a Select.
- List options in a rational order that makes logical sense.
- Have comprehensive and distinct options.
- Have one or more options checked at a time.
- Have no checked by default.
- List options vertically, making the options more distinguishable.
- Have the Checkboxes work independently from others on the list.
- Always have a flat hierarchy, as nesting Checkboxes is not following common design standards and add unnecessary complexity.
☝️ Note
For more information on stand-alone Checkboxes refer to their documentation.
Checkbox Group vs. Radio Group
Follow common design standards when using Checkbox or Radio Group, as this will enhance a user's experience when selecting preferred options.
A Checkbox Group should:
- Be used for option lists with 6 or fewer options, where a user can select more than one option.
- Allow to select any number of options, including zero, one, or several.
A Radio Group should:
- Be used for option lists with 6 or fewer options.
- Allow to select exactly one option.
States
A Checkbox Groups state changes when the user engages with it. When used inside a group, the state can be determined by a parent Checkbox.
A Checkbox Group should:
- Use disabled when the Checkbox Group is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Only automatically focus the Checkbox Group on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.
- Always update its state independently from other Checkboxes, unless the Checkbox Group is inside a group of Checkboxes where its state can be set by a parent Checkbox.
When used in a nested group, a Checkbox should:
- Use checked set to 'true' for the parent Checkbox when all others are checked.
- Use checked set to 'false' for the parent Checkbox when all others are unchecked.
- Use checked set to 'indeterminate' for the parent Checkbox when some, but not all, of the other Checkboxes, are checked.
Group Label
A Checkbox Group’s label communicates the option that will be set when the user engages with it.
A label should:
- Use affirmative language to indicate what will happen when they switch on the Checkbox rather than informing them about what won't happen.
- Use sentence-case for optimal readability.
- Use clamp to force it into a single line when needed, while always ensuring that the visible part of the label still conveys the meaning of the option.
- Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies. Instead, contextual information that can include links and buttons should be displayed next to a Checkbox.
Help text
A help-text provides extra guidance or instructions to the user. It can also clarify how the information will be used.
A help-text should:
- Be used when extra guidance or instructions are beneficial.
- Be supplementary to the Radio Group's label, not repeating it.
- Use sentence-case for optimal readability.
Prefix
A Checkbox Group can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags or thumbnails.
A prefix should:
- Always be used in combination with a label.
- Use a maximum size of 24 x 24 pixels.
- Use only one single non-interactive element.
- Be uniform in size and ratio.
- Use the same color as the label when it is an Icon.
- Never be embedded through an iframe.
- Use the same kind of prefix as its parent Checkbox when used inside a group of Checkboxes, as a consistent usage of prefixes across a group of Checkboxes gains a persistent and equal representation of options.
🎨 How to implement a prefix in Figma
Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.
Form validation
A Checkbox Group should:
- Be set to required if entering information is required to submit a form.
- Be marked as "Required" when the majority of the fields in the same form are optional.
- Be marked as "Optional" when the majority of the fields in the same form are required.
- Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the Checkbox Group.
- Have a validation message that is supplementary to the Checkbox Group’s label and help-text without repeating them.
- Instruct how to avoid possible errors with a validation message.
- Have the validation message be as short and clear as possible.
Accessibility
A Checkbox Group should:
- Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.