Get boba!
boba Version 1.7.2

Checkboxes

Checkboxes let users select individual form items.

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="checkbox">
        <input type="checkbox" id="example-checkbox-1" class="checkbox-input" checked>
        <label for="example-checkbox-1" class="checkbox-label">
            First Checkbox
        </label>
    </div>

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

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

Sizes

Checkboxes can be resized.
<form class="form-control" action="#" method="post">
    <div class="checkbox small">
        <input type="checkbox" id="example-checkbox-small" class="checkbox-input" checked>
        <label for="example-checkbox-small" class="checkbox-label">
            Small Checkbox
        </label>
    </div>
    
    <div class="checkbox default">
        <input type="checkbox" id="example-checkbox-default" class="checkbox-input" checked>
        <label for="example-checkbox-default" class="checkbox-label">
            Default Checkbox
        </label>
    </div>
    
    <div class="checkbox medium">
        <input type="checkbox" id="example-checkbox-medium" class="checkbox-input" checked>
        <label for="example-checkbox-medium" class="checkbox-label">
            Medium Checkbox
        </label>
    </div>
    
    <div class="checkbox large">
        <input type="checkbox" id="example-checkbox-large" class="checkbox-input" checked>
        <label for="example-checkbox-large" class="checkbox-label">
            Large Checkbox
        </label>
    </div>
</form>

States

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

Colors

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