Moody's CRE

Checkbox

Examples

Groups of checkboxes 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 mb2">
    <label class="control checkbox">
        <input type="checkbox" checked>
        <span class="control-indicator"></span>
        One
    </label>
    <label class="control checkbox">
        <input type="checkbox">
        <span class="control-indicator"></span>
        Two
    </label>
    <label class="control checkbox">
        <input type="checkbox">
        <span class="control-indicator"></span>
        Three
    </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 checkbox mb2 disabled">
    <input type="checkbox" disabled>
    <span class="control-indicator"></span>
    Sign up
</label>

See also