Radio button

Radio button

Radio button label
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-if1xjop41xb-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-if1xjop41xb-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-if1xjop41xb-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-if1xjop41xb-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-if1xjop41xb-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-if1xjop41xb-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
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-i6hemc3qsx-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
          <label for="radio-button-i6hemc3qsx-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-i6hemc3qsx-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
          <label for="radio-button-i6hemc3qsx-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-i6hemc3qsx-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
          <label for="radio-button-i6hemc3qsx-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
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-n8was9yv86a-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-n8was9yv86a-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-n8was9yv86a-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-n8was9yv86a-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-n8was9yv86a-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-n8was9yv86a-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
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-m0jx5nt4cz-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
          <label for="radio-button-m0jx5nt4cz-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-m0jx5nt4cz-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
          <label for="radio-button-m0jx5nt4cz-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-m0jx5nt4cz-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
          <label for="radio-button-m0jx5nt4cz-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.