Skip to main contentCarbon Design System

Checkbox

Color

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--checkbox-labeltext color$text-01
.bx--checkboxborder$ui-05
.bx--checkbox:uncheckedbackground-colortransparent
.bx--checkbox:checkedbackground-color$ui-05
.bx--checkbox:checkedcheckmark$inverse-01
Checkbox states

Interactive states

StatePropertyColor token
:focusborder$focus
:disabledtext color$disabled-02
:disabledborder$disabled-02
Checkbox interactive states

Typography

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

ClassFont-size (px/rem)Font-weightType token
.bx--label12 / 0.75Regular / 400$label-01
.bx--checkbox-label14 / 0.875Regualr / 400$body-short-01

Structure

ClassPropertypx / remSpacing token
.bx--checkboxheight & width16px–
.bx--checkboxborder1px–
.bx--checkbox:focusborder2px–
.bx--labelmargin-bottom8 / 0.5$spacing-03
.bx--checkbox-labelpadding-left8 / 0.5$spacing-03
.bx--form-item.bx--checkbox-wrappermargin-bottom8 / 0.5$spacing-03
Structure and spacing measurements for checkbox

Structure and spacing measurements for checkbox | px / rem