Skip to main contentCarbon Design System

Radio button

Color

ElementPropertyColor token
Group labeltext color$text-secondary
Radio button labeltext color$text-primary
Radio button (unselected)border$icon-primary
background-colorTransparent
Radio button (selected)border$icon-primary
dot$icon-primary
Helper texttext color$text-secondary
Radio button states

Interactive colors

StateElementPropertyColor token
FocusRadio buttonborder$focus
DisabledLabeltext color$text-disabled
Radio buttonborder$icon-disabled
inner fill$icon-disabled
Read-onlyLabeltext color$text-primary
Radio buttonborder$icon-disabled
inner fill$icon-primary
ErrorLabeltext color$text-primary
Radio buttonborder$support-error
Error messagetext color$text-error
Error iconsvg$support-error
WarningLabeltext color$text-primary
Radio buttonborder$icon-primary
Warning messagetext color$text-primary
Warning iconsvg$support-warning
inner fill$black
Radio button interactive states

Typography

Radio button labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

ElementFont-size (px/rem)Font-weightType token
Group label12 / 0.75Regular / 400$label-01
Radio button 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
Radio button iconheight, width20 / 1.25
margin-right8 / 0.5$spacing-03
Dotheight, width8 / 0.5
margin-right8 / 0.5$spacing-03
Group labelmargin-bottom8 / 0.5$spacing-03
Horizontal group itemmargin-left8 / 0.5$spacing-03
Vertical group itemmargin-bottom8 / 0.5$spacing-03
Structure and spacing measurements for a radio button

Structure and spacing measurements for radio button | px | rem

Structure and spacing measurements for a radio button

Structure and spacing measurements for radio button | px | rem