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.

Examples

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

Unselected

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

Selected

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

Disabled

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

Disabled and Selected

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