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

ElementPropertyColor token
Checkbox:focusborder$focus
Label:disabledtext color$text-disabled
Checkbox:disabledborder$icon-disabled
background$icon-disabled
Checkbox interactive states

Typography

Checkbox labels should be sentence case, with only the first word in a phrase and any proper nouns capitalized. Checkbox 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 checkbox

Structure and spacing measurements for checkbox | px / rem