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
Helper texttext color$text-secondary
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
ErrorLabeltext color$text-primary
Checkboxborder$support-error
Error messagetext color$text-error
Error iconsvg$support-error
WarningLabeltext color$text-primary
Checkboxborder$icon-primary
Warning messagetext color$text-primary
Warning iconsvg$support-warning
inner fill$black
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
Helper text12 / 0.75Regular / 400$helper-text-01
Error message12 / 0.75Regular / 400$label-01
Warning message12 / 0.75Regular / 400$label-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