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-lm5n7wbo8g-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-lm5n7wbo8g-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-lm5n7wbo8g-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-lm5n7wbo8g-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-lm5n7wbo8g-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-lm5n7wbo8g-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-rsty3s74mm-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-rsty3s74mm-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-rsty3s74mm-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-rsty3s74mm-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-rsty3s74mm-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-rsty3s74mm-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-9ixk1k04hot-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-9ixk1k04hot-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-9ixk1k04hot-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-9ixk1k04hot-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-9ixk1k04hot-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-9ixk1k04hot-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-kir98s0882-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-kir98s0882-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-kir98s0882-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-kir98s0882-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-kir98s0882-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-kir98s0882-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>

Documentation

FAQ

Using fieldset and legend

It's a best practice to use fieldset and legend when composing HTML for radio buttons. Unlike checkboxes, radio buttons should always be grouped.

See Form for more details.

Edit this page on GitHub
Previous
Components: Progress indicator
Next
Radio button: Usage