Guidelines
Guidelines
Usage
A Checkbox should:
- Have one (for stand-alone) or more (for Checkbox Group) options that are mutually inclusive.
- 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 options checkedby default.
- List options vertically, making the options more distinguishable.
- Always have a flat hierarchy, as nesting Checkboxes is not following common design standards and add unnecessary complexity.
- Have its hit area span the width of an entire row when used in a Select or overlay context for optimal accessibility.
☝️ Watch out
help-text, validation-message, and multiline (connected to required in Figma) are properties that should be used only for a standalone Checkbox.
Checkbox vs. Radio
Follow common design standards when using Checkbox or Radio Group, as this will enhance a user's experience when selecting preferred options.
A Checkbox should:
- Have a single option when used standalone. The user can turn it on or off.
- When using multiple Checkboxes for one form input refer to Checkbox Group.
A Radio should:
- Be used for two or more options that are mutually exclusive. The user must select exactly one option.
Standalone Checkbox
Use the standalone Checkbox to select or deselect a single option. Typically, it’s used at the end of a form, for example, to confirm that a user agrees to specific terms.
A standalone Checkbox should:
- Have help-text provide additional information.
- Have validation-message to inform if the user's input was invalid and to give instructions on the situation.
- Use multiline to have the required state reflected correctly for a text that wraps across multiple lines.
States
A Checkbox's state changes when the user engages with it. When used inside a group, the state can be determined by a parent Checkbox.
A Checkbox should:
- Use disabled when the Checkbox is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Only automatically focus the Checkbox 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 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.
Label
A Checkbox's label communicates the option that will be set when the user engages with it.
A label should:
- Use affirmative language to indicate to a user 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 making sure 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 Checkbox’s 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.
- Only be used on a stand-alone Checkbox. Checkboxes are used in a Checkbox Group the group controls the help-text.
Prefix
A Checkbox 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 should:
- Use required if checking the control 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 component.
- Have a validation message that is supplementary to the Checkbox'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 should:
- Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.