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
<!--
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.