Checkboxes

Class

CheckedUncheckedChecked+TextUnchecked+Text

States

EnabledHoverDisabled

Code

CSSHTML

<div class="checkbox checkbox-hover">
    <div class="checkbox-container">
        <input type="checkbox" checked>
        <span class="checkbox-visual"></span>
    </div>
</div>

States

EnabledHoverDisabled

Code

CSSHTML

<div class="checkbox checkbox-hover">
    <div class="checkbox-container">
        <input type="checkbox">
        <span class="checkbox-visual"></span>
    </div>
</div>

Label

States

EnabledHoverDisabled

Label

Label

Label

Code

CSSHTML

<div class="checkbox checkbox-hover">
    <div class="checkbox-container">
        <input type="checkbox" checked id="checkbox-text-1">
        <span class="checkbox-visual"></span>
    </div>
    <label for="checkbox-text-1" class="checkbox-text">Label</label>
</div>

Label

States

EnabledHoverDisabled

Label

Label

Label

Code

CSSHTML

<div class="checkbox checkbox-hover">
    <div class="checkbox-container">
        <input type="checkbox" id="checkbox-text-2">
        <span class="checkbox-visual"></span>
    </div>
    <label for="checkbox-text-2" class="checkbox-text">Label</label>
</div>