Skip to main contentCarbon Design System

Checkbox

The following page documents visual specifications such as color, typography, and structure.

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

AI presence

The only style modification an AI variant of the checkbox has is the addition of the AI label. All other tokens in the component remain the same as the non-AI variants.

For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
AI labelsizemini
Structure and spacing measurements for checkbox with AI presence

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.