Radio button – Carbon Design System

Preview the radio button component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Radio button component


  <FormGroup
  legendText="Radio button heading"
>
  <RadioButtonGroup
    defaultSelected="default-selected"
    legend="Group Legend"
    name="radio-button-group"
    valueSelected="default-selected"
  >
    <RadioButton
      id="radio-1"
      labelText="Radio button label"
      value="standard"
    />
    <RadioButton
      id="radio-2"
      labelText="Radio button label"
      value="default-selected"
    />
    <RadioButton
      id="radio-3"
      labelText="Radio button label"
      value="disabled"
    />
  </RadioButtonGroup>
</FormGroup>


  <FormGroup
  legendText="Radio button heading"
>
  <RadioButtonGroup
    defaultSelected="default-selected"
    legend="Group Legend"
    name="radio-button-group"
    valueSelected="default-selected"
  >
    <RadioButton
      id="radio-1"
      labelText="Radio button label"
      value="standard"
    />
    <RadioButton
      id="radio-2"
      labelText="Radio button label"
      value="default-selected"
    />
    <RadioButton
      id="radio-3"
      labelText="Radio button label"
      value="disabled"
    />
  </RadioButtonGroup>
</FormGroup>

Edit this page on GitHub

Radio button: Style

Radio button: Accessibility