Checkboxes

Checkbox

<p>
    <label class="label--wrapping">
        <input type="checkbox"> Checkbox
    </label>
</p>

Checkbox list

Regular checkbox
Checked checkbox
Checkbox with a long label. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis tortor nec ante tincidunt, sit amet accumsan dolor feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Disabled checkbox
Checked disabled checkbox
Invalid checkbox
Checked invalid checkbox

<ul class="input-list">
    <li class="input-list__item">
        <label class="input-list__label">
            <input type="checkbox"> Regular checkbox
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input type="checkbox" checked> Checked checkbox
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input type="checkbox"> Checkbox with a long label. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis tortor nec ante tincidunt, sit amet accumsan dolor feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input type="checkbox" disabled> Disabled checkbox
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input type="checkbox" checked disabled> Checked disabled checkbox
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input class="invalid" type="checkbox"> Invalid checkbox
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input class="invalid" type="checkbox" checked> Checked invalid checkbox
        </label>
    </li>
</ul>

Inline checkbox list

John
Paul
George
Ringo

<ul class="list--inline">
    <li>
        <label class="input-list__label">
            <input type="checkbox"> John
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input type="checkbox"> Paul
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input type="checkbox"> George
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input type="checkbox"> Ringo
        </label>
    </li>
</ul>