Checkboxes allow marketers to check on or off specific selections. It allows for multiple selections from a list of options, providing a versatile input method for various use cases.
Design
Checkbox
The individual control that allows the marketer to make a selection.
Variants
Default: A basic checkbox input that includes the checkbox control as well as a label.
Bordered: A checkbox that has a larger click target and container—can be useful when more visual emphasis is needed, or additional information is included inside of the container with the selection.
Description: provides additional context or details for the related checkbox item.
Leading icon: can be used to help draw relationship between a selection (for example, Apple and Android icons before the label selection, indicating the app type).
Trailing icon: another option for adding visual emphasis to the checkbox item.
Trailing badge: a badge that follows a checkbox label, commonly used for cases where a certain option is recommended.
Slot: custom content can be included if placed in a slot—used when a particular selection may have child content once selected.
Checkbox group
A collection of multiple checkboxes for selecting options within a related category or set. Depending on the number of items, checkbox groups can have either a vertical or horizontal orientation, with the vertical option as the preferred default.
Checkbox group, vertical
Checkbox group, horizontal
Bordered checkbox group, vertical
Bordered checkbox group, horizontal
Guidelines
Use cases
Use the Checkbox component when marketers need to make multiple selections from a list of options, such as choosing preferences, interests, or features.
Implement the component in forms, surveys, preference settings, or any interface requiring multiple-choice selection.
Note: Checkboxes share a similar function with the Toggle component, but Checkboxes should be used when the user is required to save the form (i.e a save button).
Do
Use a Checkbox over a Toggle when a save required for the action or setting to persist.
Provide clear labels for each checkbox option to ensure clarity and facilitate informed decision-making.
Offer an intuitive user interface with visually distinct checkboxes and easy-to-understand interaction patterns.
Consider the layout and presentation of checkboxes to optimize space usage and improve readability.
Don't
Don't overwhelm users with too many checkboxes in a single group, as it can lead to decision fatigue and confusion.
Don't use checkboxes for mutually exclusive options; instead, use radio buttons to prevent ambiguity.
Don't neglect to test the Checkbox component across different devices and screen sizes to ensure compatibility and responsiveness.
Content
Checkboxes should always leverage the built-in label and provide descriptive labels for each option to guide marketers in making selections. It should also provide clear instructions or contextual information to aid in decision-making and prevent errors.
Accessibility
Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for each checkbox.
Ensure that the Checkbox component is navigable using keyboard controls, allowing marketers to toggle checkboxes without relying solely on mouse interactions.
Provide sufficient color contrast and visual indicators to highlight selected checkboxes and improve visibility for users with low vision or color vision deficiencies.
Test the Checkbox component with assistive technologies and screen readers to verify its accessibility and usability for marketers with disabilities.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova