Skip to main contentCarbon Design System

Radio button

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

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

AI presence

The only style modification an AI variant of the radio button 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 radio button with AI presence

Feedback

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