<!--
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-2ewd7vks8b-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
<label for="radio-button-2ewd7vks8b-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-2ewd7vks8b-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
<label for="radio-button-2ewd7vks8b-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-2ewd7vks8b-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
<label for="radio-button-2ewd7vks8b-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><!--
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-y023m72tq4q-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
<label for="radio-button-y023m72tq4q-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-y023m72tq4q-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
<label for="radio-button-y023m72tq4q-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-y023m72tq4q-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
<label for="radio-button-y023m72tq4q-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><!--
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-qp0s6ayuok-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
<label for="radio-button-qp0s6ayuok-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-qp0s6ayuok-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
<label for="radio-button-qp0s6ayuok-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-qp0s6ayuok-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
<label for="radio-button-qp0s6ayuok-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><!--
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-p3esylp0moo-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
<label for="radio-button-p3esylp0moo-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-p3esylp0moo-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
<label for="radio-button-p3esylp0moo-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-p3esylp0moo-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
<label for="radio-button-p3esylp0moo-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>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.