Checkbox
A checkbox is an essential UI element that allows users to make binary choices.
- Overview
- Specs
- Guidelines
Component
A checkbox is an essential UI element that allows users to make binary choices, typically represented by a small square that can be checked or unchecked. Visual cues such as the check mark and the box itself provide clear affordance, indicating that the element is interactive.
Accessibility is crucial for checkboxes to ensure they can be used by everyone, including people with impairments. Proper labeling is necessary so that screen readers can convey the checkbox’s state and purpose.
Keyboard navigation should be supported, allowing users to navigate and toggle checkboxes using keys such as Tab and Spacebar.
1: Checkbox
2: Add-On
3: Label
4: Required
5: Tooltip
Used for:
Select Box
Within the Multi-select variation, the checkbox is used in those cases.
Drop-down
For the drop-down items, the Checkbox can be one of the variations, and by consequence, the checkbox is the component used.
Consent and agreement
Checkboxes are commonly used to capture user consent or agreement for legal and compliance purposes. This ensures that users actively acknowledge and agree to terms, conditions, or privacy policies.
Data Grid
Checkboxes in a data grid serve as an indicator for bulk actions, since when selected, bulk actions can be used.
Don’t use for:
Single selection
Checkboxes are not suitable for situations where only one option should be selected from a list. In such cases, radio buttons are more appropriate.
Binary choices with immediate action
For binary choices where an immediate action is required upon selection, toggle switches or buttons are more appropriate.
Confirmations and critical actions
Checkboxes are not suitable for actions that require immediate confirmation or have significant consequences. Buttons or dialogs with explicit confirmation messages are better for these scenarios.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated typography;
- Updated icon font;
- Updated colors;
