Get boba!
boba Version 1.7.2

Switches

Switches let users toggle between the enabled and disabled states for a particular setting or option.

Compatibility

Be sure that the input's type is checkbox and that each of the input's ids match their label's for!

Note that for the label to be displayed correctly, it must be placed directly after the input tag.

<form class="form-control" action="#" method="post">
    <div class="switch">
        <input type="checkbox" id="example-switch-1" class="switch-input" checked>
        <label for="example-switch-1" class="switch-label">
            First Switch
        </label>
    </div>

    <div class="switch">
        <input type="checkbox" id="example-switch-2" class="switch-input" checked>
        <label for="example-switch-2" class="switch-label">
            Second Switch
        </label>
    </div>

    <div class="switch">
        <input type="checkbox" id="example-switch-3" class="switch-input">
        <label for="example-switch-3" class="switch-label">
            Third Switch
        </label>
    </div>
</form>

Sizes

Switches can be resized.
<form class="form-control" action="#" method="post">
    <div class="switch small">
        <input type="checkbox" id="example-switch-small" class="switch-input" checked>
        <label for="example-switch-small" class="switch-label">
            Small Switch
        </label>
    </div>

    <div class="switch default">
        <input type="checkbox" id="example-switch-default" class="switch-input" checked>
        <label for="example-switch-default" class="switch-label">
            Default Switch
        </label>
    </div>

    <div class="switch medium">
        <input type="checkbox" id="example-switch-medium" class="switch-input" checked>
        <label for="example-switch-medium" class="switch-label">
            Medium Switch
        </label>
    </div>
    
    <div class="switch large">
        <input type="checkbox" id="example-switch-large" class="switch-input" checked>
        <label for="example-switch-large" class="switch-label">
            Large Switch
        </label>
    </div>
</form>

States

Switches can be disabled using the disabled attribute.
<form class="form-control" action="#" method="post">
    <div class="switch">
        <input type="checkbox" id="example-switch-checked-disabled" class="switch-input" checked disabled>
        <label for="example-switch-checked-disabled" class="switch-label">
            Disabled Checked Switch
        </label>
    </div>
    
    <div class="switch">
        <input type="checkbox" id="example-switch-unchecked-disabled" class="switch-input" disabled>
        <label for="example-switch-unchecked-disabled" class="switch-label">
            Disabled Unchecked Switch
        </label>
    </div>
</form>

Colors

Change the color of your switches using boba's vibrant color palette.
<form class="form-control" action="#" method="post">
    <div class="switch green">
        <input type="checkbox" id="example-switch-green" class="switch-input" checked>
        <label for="example-switch-green" class="switch-label">
            Green Switch
        </label>
    </div>
</form>