A radio is a form component used to select one and only one option from a set of options.
Use radio to present users with two or more mutually exclusive options where the user is best-served by seeing all available options side-by-side.
To use sme radio styling you must encapsulate the radio in a container with the .sme-radio class. Note that the name property of the input[type="radio] elements should be the same to group radio buttons together
<div class="sme-radio sme-documentation-example">
<label>
<input aria-label="Control label" type="radio" aria-checked="false" name="enabled-example">
<span aria-hidden="true">Control label</span>
</label>
</div>
<div class="sme-radio sme-documentation-example">
<label>
<input aria-label="Control label" type="radio" checked="checked" aria-checked="true" name="enabled-example">
<span aria-hidden="true">Control label</span>
</label>
</div>
<div class="sme-radio sme-documentation-example">
<label>
<input aria-label="Control label" type="radio" disabled="disabled" aria-checked="false" name="disabled-example">
<span aria-hidden="true">Control label</span>
</label>
</div>
<div class="sme-radio sme-documentation-example">
<label>
<input aria-label="Control label" type="radio" checked="checked" disabled="disabled" aria-checked="true" name="disabled-example">
<span aria-hidden="true">Control label</span>
</label>
</div>