Checkboxes

Notes about browser considerations and use of .option-label/.description/.form-item, checkboxes are toggled on and off independently, multiple checkboxes grouped in a set can be selected.

Code & Variants

Single Checkboxes

Two approaches to pairing a single checkbox with its labeling.

<form>
    { Legend }
    <div class="{spacing}">
        <label for="checkbox1">Single Checkboxes Label</label>
        <input type="checkbox" id="checkbox1" name="checkbox1" aria-describedby="checkbox1_desc">
        <span class="{description}">Descriptive Text</span>
    </div>
    <div class="{spacing}">
        <input type="checkbox" id="checkbox2" name="checkbox2" aria-describedby="checkbox2_desc">
        <label for="checkbox2">Single Checkbox2</label>
    </div>
</form>

Multiple Checkboxes

A grouped set of checkboxes sharing the same name attribute and .mini sizing.

<form>
    <fieldset>
        <!-- Legend -->
        <div class="{font-size}">
            <div class="{spacing}">
                <input type="checkbox" id="checkbox1" name="checkbox1" aria-describedby="checkbox1_desc">
                <label class="{label}" for="checkbox1">Checkbox1</label>
            </div>
            <div class="{spacing}">
                <input type="checkbox" id="checkbox2" name="checkbox2" aria-describedby="checkbox2_desc">
                <label class="{label}" for="checkbox2">Checkbox2</label>
            </div>
            <div class="{spacing}">
                <input type="checkbox" id="checkbox3" name="checkbox3" aria-describedby="checkbox3_desc">
                <label class="{label}" for="checkbox3">Checkbox3</label>
            </div>
            <div class="{spacing}">
                <input type="checkbox" id="checkbox4" name="checkbox4" aria-describedby="checkbox4_desc">
                <label class="{label}" for="checkbox4">Checkbox4</label>
            </div>
        </div>
    </fieldset>
</form>

Classes

{font-size}

Default
The font will be full size (16px).
Example Checkboxes
Label Mini (.mini)
This will reduce the size of the font on multiple inputs to help the form stack more nicely.
Example Checkboxes

{spacing}

Input Item Spacing (.form-item)
Creates uniform spacing between form input items.