Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Radio button

Color

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--radio-button__labeltext color$text-01
.bx--radio-button__appearanceborder$ui-05
.bx--radio-button__appearancebackground-color$ui-01
.bx--radio-button__appearance:checkedborder$ui-05
.bx--radio-button__appearance::beforedot$ui-05

Interactive colors

ClassPropertyColor token
.bx--radio-button__appearance:focusborder$focus
.bx--label:disabledtext color$disabled-02
.bx--radio-button__label:disabledtext color$disabled-02
.bx--radio-button__appearance:disabledborder$disabled-02

Typography

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

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

Structure

ClassPropertypx / remSpacing token
.bx--radio-button__appearanceheight, width20 / 1.25
.bx--radio-button__appearance:beforeheight, width8 / 0.5
.bx--radio-button__labelmargin-bottom8 / 0.5$spacing-03
.bx--radio-button__appearancemargin-right8 / 0.5$spacing-03
.bx--radio-button__appearancemargin-bottom8 / 0.5$spacing-03
Structure and spacing measurements for a radio button

Structure and spacing measurements for radio button | px | rem

The following specs are not built into the radio button component but are recommended by design as the proper amount of space around a grouping of or in between stacked radio buttons.

ClassPropertypx / remSpacing token
Horizontal alignmentmargin-right16 / 1$spacing-05
Vertical alignmentmargin-bottom8 / 0.5$spacing-03
Structure and spacing measurements for a radio button

Structure and spacing measurements for radio button | px | rem