Skip to main content
Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Experimental Radio Button

Radio Button heading

Vanilla JS

<!-- 
  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 heading</legend>
  <div class="bx--form-item">
    <div class="bx--radio-button-group ">
        <input id="radio-button-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
        <label for="radio-button-1" class="bx--radio-button__label">
          <span class="bx--radio-button__appearance"></span>
          Radio Button label
        </label>
        <input id="radio-button-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
        <label for="radio-button-2" class="bx--radio-button__label">
          <span class="bx--radio-button__appearance"></span>
          Radio Button label
        </label>
        <input id="radio-button-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
        <label for="radio-button-3" class="bx--radio-button__label">
          <span class="bx--radio-button__appearance"></span>
          Radio Button label
        </label>
    </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.