Checkboxes are used when multiple items can be selected in a list. Users can select zero, one, or several items. Checkboxes work independently from each other; checking one box does not affect any other selections. A standalone checkbox may be used for a single option that the user can turn on or off.
Color
| Element | Property | Color token |
|---|
| Group label | text color | $text-secondary |
| Checkbox label | text color | $text-primary |
| Checkbox:unchecked | border | $border-subtle-01 |
| | background-color | $background |
| Checkbox:checked | background-color | $icon-brand |
| | checkmark | $icon-on-color |
| Helper text | tect color | $text-secondary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Group label | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Checkbox label | 14 / 0.875 | Regular / 400 | $body-compact-02 |
| Helper text | 14 / 0.875 | Regular / 400 | $helper-text-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Checkbox | height, width | 14px | – |
| | border | 1px | – |
| Group label | margin-bottom | 4 / 0.25 | $spacing-02 |
| Checkbox label | padding-left | 8 / 0.5 | $spacing-03 |
| Checkbox item | margin-bottom | 8 / 0.5 | $spacing-03 |
