Moody's CRE

Radio

Examples

Groups of radios are always wrapped with .control-group. We wrap each individual control in a label to get a larger hit area, so we can replace the default input, and to trigger the state of the input automatically without using JavaScript.

<div class="control-group">
    <label class="control radio">
        <input name="radio" type="radio" checked>
        <span class="control-indicator"></span>
        Uno
    </label>
    <label class="control radio">
        <input name="radio" type="radio">
        <span class="control-indicator"></span>
        Due
    </label>
    <label class="control radio">
        <input name="radio" type="radio">
        <span class="control-indicator"></span>
        Tre
    </label>
</div>

Disabled State

:disabled form elements will automatically receive this styling. If you need to add disabled styling to a label or something like a group of elements, use .disabled.

<label class="control radio mb2 disabled">
    <input type="radio" disabled>
    <span class="control-indicator"></span>
    Sign up
</label>

See also