Skip to main contentCarbon Design System

Radio button

Radio button

Radio button label
Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<fieldset class="bx--fieldset">
  <legend class="bx--label">Radio button label</legend>
  <div class="bx--form-item">
    <div class="bx--radio-button-group ">
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-abfeuherm2f-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-abfeuherm2f-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-abfeuherm2f-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-abfeuherm2f-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-abfeuherm2f-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-abfeuherm2f-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
    </div>
  </div>
</fieldset>

Radio button horizontal group left

Radio button label
Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<fieldset class="bx--fieldset">
  <legend class="bx--label">Radio button label</legend>
  <div class="bx--form-item">
    <div class="bx--radio-button-group ">
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-fe947kfg4r-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-fe947kfg4r-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-fe947kfg4r-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-fe947kfg4r-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-fe947kfg4r-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-fe947kfg4r-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
    </div>
  </div>
</fieldset>

Radio button vertical group

Radio button label
Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<fieldset class="bx--fieldset">
  <legend class="bx--label">Radio button label</legend>
  <div class="bx--form-item">
    <div class="bx--radio-button-group  bx--radio-button-group--vertical ">
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-4jsb7qdatol-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-4jsb7qdatol-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-4jsb7qdatol-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-4jsb7qdatol-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper">
          <input id="radio-button-4jsb7qdatol-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-4jsb7qdatol-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
    </div>
  </div>
</fieldset>

Radio button vertical group left

Radio button label
Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<fieldset class="bx--fieldset">
  <legend class="bx--label">Radio button label</legend>
  <div class="bx--form-item">
    <div class="bx--radio-button-group  bx--radio-button-group--vertical ">
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-63xkrf9wk2r-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-63xkrf9wk2r-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-63xkrf9wk2r-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-63xkrf9wk2r-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-left">
          <input id="radio-button-63xkrf9wk2r-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-63xkrf9wk2r-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            <span class="bx--radio-button__label-text">Radio button label</span>
          </label>
        </div>
    </div>
  </div>
</fieldset>
Edit this page on GitHub
Previous
Components: Progress indicator
Next
Radio button: Usage