Components
Checkbox
Allow users to select and deselect items in bulk
Anatomy
Checkboxes allow users to select and deselect items in bulk. They provide the ability for users to select one or several items, deselect, or initiate an action.
- Container : Selection control (input) that can be selected or unselected, and pushed into different states.
- Icon : Icon that appears within the Checkbox input.
- Label : The Label is the text attributed to the Checkbox that provides context.
An icon can be added to a checkbox container to show different checkbox states including selected and partial selection.
Do : Display Vertical
Checkboxes should be displayed vertically, stacked for consistent alignment and positioning across different breakpoints for clear direction
Don't : Display Horizontal
Avoid using Checkboxes in a horizontal orientation to avoid issues with alignment and legibility when there are multiple Checkboxes grouped together
Usage
Checkboxes are very flexible components that can be placed anywhere you need to provide a user with choices. The checkbox items should work independently from each other, so selecting one checkbox shouldn’t change the status of another checkbox in the list
Common places checkbox appear: Tables, Forms, settings pages, etc.
When to use
- To present multiple options that can each be selected.
- To offer help or error handling for simple settings.
- For changes that require confirmation after selection.
When not to use
- When only one of multiple options can be selected.
- You want to group multiple options into a single basic choice.
- For single on/off settings with an instant response.
Accessibility
A checkbox is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting. Keyboard users will be able to interact with the checkbox component by pressing Space to select the input. We have added any attributes necessary to make it properly announced to screen readers.
Do : With Padding
Provide minimum 4 px of padding around the icon
Don't : Without Padding
Allow icon to extend to edge of container
Margin and Padding
Icons inside the container should have adequate padding around it to support visual hierarchy and balance. We recommend providing even padding along the top, bottom, right, and left of the icon.
Always maintain a minimum 16 pixel margin between buttons and other buttons or components so that they do not become lost.
Content
When writing checkbox labels:
- Checkbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting
- Checkboxes should always have a Label associated to give users context of what the Checkbox represents
- Avoid ending in punctuation if it’s a single sentence, word, or a fragment
- Do not use commas or semicolons at the end of each line
Do : With spesific label item
Use direct and concise button labels
Don't : With long label item
Don’t overwhelm users with too much information at once