<!--
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-ipuz8yi319-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
<label for="radio-button-ipuz8yi319-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-ipuz8yi319-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
<label for="radio-button-ipuz8yi319-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-ipuz8yi319-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
<label for="radio-button-ipuz8yi319-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-p2ili5u4kb-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
<label for="radio-button-p2ili5u4kb-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-p2ili5u4kb-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
<label for="radio-button-p2ili5u4kb-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-p2ili5u4kb-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
<label for="radio-button-p2ili5u4kb-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-ceedkn1ilpp-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
<label for="radio-button-ceedkn1ilpp-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-ceedkn1ilpp-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
<label for="radio-button-ceedkn1ilpp-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-ceedkn1ilpp-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
<label for="radio-button-ceedkn1ilpp-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-16553ym7wrd-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
<label for="radio-button-16553ym7wrd-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-16553ym7wrd-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
<label for="radio-button-16553ym7wrd-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-16553ym7wrd-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
<label for="radio-button-16553ym7wrd-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.