Anatomy
The checkbox component is composed of a checkbox label and a checkbox input. If there is a group of checkboxes, a group label can be added.
|
Item |
Name |
Description |
Component |
|---|---|---|---|
|
1 |
Checkbox input |
Selection control (input) that can be selected or unselected, and pushed into different states. |
Checkbox |
|
2 |
Group label |
Optional | Text attributed to the checkbox group for context. |
Label |
|
3 |
Label |
Text attributed to the checkbox for context. |
Label |
|
4 |
Icon |
Appears within the checkbox input. |
- |
|
5 |
Helper text |
Helper text to indicate error state. |
- |
Color
|
Element |
Property |
Token |
|---|---|---|
|
Checkbox label |
text color |
text.static.primary |
|
Checkbox unchecked |
border |
border.interactive.default |
|
|
background-color |
none (inherit parent) |
|
Checkbox checked |
|
background.interactive.primary.default |
|
|
icon |
text.static.inverse |
|
Helper text |
text color |
text.alert.danger |
Specification & Properties
Single or grouping
|
Item |
Option |
Description |
|---|---|---|
|
1 |
Single Checkbox |
Can be used to accept terms of agreement or questions following the convention of, "Check here if..." |
|
2 |
Checkbox Group |
Use a checkbox group to allow users to select multiple items from a list of individual items, or to mark one individual item as selected. |
Spacing
Alignment
Checkbox labels are positioned to the right of their inputs. If there is a checkbox grouping, they can be laid out vertically or horizontally depending on the use case and the structure of the UI. When possible, arrange the checkbox and radio button groups vertically for easy scanning.
Optional elements
|
Item |
Name |
Description |
|---|---|---|
|
1 |
Label |
It's the group title |
|
2 |
Error message |
It indicates an error |
States
The checkbox states are composed out of two strings:
- Unchecked, checked, and indeterminate.
- Default, hover, active disabled, and error.
Use the indeterminate state when the checkbox contains a sublist of selections, some of which are checked, and some unchecked.
|
Item |
State |
|
Description |
|---|---|---|---|
|
1 |
Read only Default |
A Unchecked B Checked C Indeterminate |
Default style before the user interacts with the checkbox. |
|
2 |
Hover |
A Unchecked B Checked C Indeterminate |
Checkbox changes style to let the user know it’s interactive. The style of the label remains the same. Users can (hover) interact with the label to check the checkbox. |
|
3 |
Active |
A Unchecked B Checked C Indeterminate |
The checkbox input changes style to let the user know the checkbox is checked. The style of the label remains the same. |
|
4 |
Disabled |
A Unchecked B Checked C Indeterminate |
Communicates that a checkbox exists, but isn’t available in that scenario. When the user hovers over a checkbox in a disabled state, the cursor shows it's ‘not allowed’. |
|
5 |
Error |
A Unchecked B Checked C Indeterminate |
The checkbox changes style when the checkbox selection doesn’t conform to a specific format. E.g. attempting to proceed without selecting a required checkbox in a form. |