Skip to main contentCarbon Design System

Checkbox

Color

ElementPropertyColor token
Group labeltext color$text-secondary
Checkbox labeltext color$text-primary
Checkbox:uncheckedborder$icon-primary
background-colortransparent
Checkbox:checkedbackground-color$icon-primary
checkmark$icon-inverse
Checkbox states

Interactive states

StateElementPropertyColor token
FocusCheckboxborder$focus
DisabledLabeltext color$text-disabled
Checkboxborder$icon-disabled
background$icon-disabled
Read-onlyLabeltext color$text-primary
Checkboxborder$icon-disabled
inner fill$icon-primary
Checkbox interactive states

Typography

Checkbox labels and group labels should be sentence case, with only the first word in a phrase and any proper nouns capitalized. Checkbox labels and group labels should not exceed three words.

ElementFont-size (px/rem)Font-weightType token
Group label12 / 0.75Regular / 400$label-01
Checkbox label14 / 0.875Regular / 400$body-compact-01

Structure

ElementPropertypx / remSpacing token
Checkboxheight & width16px
border1px
Checkbox:focusborder2px
border inset1px
Group labelmargin-bottom8 / 0.5$spacing-03
Checkbox labelpadding-left8 / 0.5$spacing-03
Checkbox itemmargin-bottom4 / 0.25$spacing-02
Structure and spacing measurements for a checkbox group

Structure and spacing measurements for a checkbox group | px / rem

Structure and spacing measurements for vertical and horizontal checkbox groupings

Structure and spacing measurements for vertical and horizontal checkbox groupings | px / rem