Cirrus

#Checkbox

Cirrus comes with a styled version of a checkbox.

#Basics

By default, checkboxes in Cirrus come with very minimal styling.

<div class="form-ext-control form-ext-checkbox">
    <input id="check1" class="form-ext-input" type="checkbox">
    <label class="form-ext-label" for="check1">Unchecked</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check2" class="form-ext-input" type="checkbox" checked>
    <label class="form-ext-label" for="check2">Checked</label>
</div>

#Stylized

Stylized checkboxes are animated and come with different variations. Since this is part of the extended controls styling, we use classes from the extended forms file which are prefixed with form-ext.

The structure of an extended checkbox is as follows:

  • form-ext-control form-ext-checkbox
    • form-ext-input
    • form-ext-label
<div class="form-ext-control form-ext-checkbox">
    <input id="check1" class="form-ext-input" type="checkbox" disabled="">
    <label class="form-ext-label" for="check1">Unchecked</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check2" class="form-ext-input" type="checkbox" disabled="" checked />
    <label class="form-ext-label" for="check2">Checked</label>
</div>

For disabled forms, just add the disabled property.

<div class="form-ext-control form-ext-checkbox">
    <input id="check1" class="form-ext-input" type="checkbox" disabled />
    <label class="form-ext-label" for="check1">Unchecked</label>
</div>
<div class="form-ext-control form-ext-checkbox">
    <input id="check2" class="form-ext-input" type="checkbox" disabled checked />
    <label class="form-ext-label" for="check2">Checked</label>
</div>

The existing variants for checkboxes consists of all the v1 colors.

<div class="col-lg-6">
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-dark" class="form-ext-input form-ext-input--dark" type="checkbox" checked />
        <label class="form-ext-label" for="check-dark">dark</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-primary" class="form-ext-input form-ext-input--primary" type="checkbox" checked />
        <label class="form-ext-label" for="check-primary">primary</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-link" class="form-ext-input form-ext-input--link" type="checkbox" checked />
        <label class="form-ext-label" for="check-link">link</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-info" class="form-ext-input form-ext-input--info" type="checkbox" checked />
        <label class="form-ext-label" for="check-info">info</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-success" class="form-ext-input form-ext-input--success" type="checkbox" checked />
        <label class="form-ext-label" for="check-success">success</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-warning" class="form-ext-input form-ext-input--warning" type="checkbox" checked />
        <label class="form-ext-label" for="check-warning">warning</label>
    </div>
    <div class="form-ext-control form-ext-checkbox">
        <input id="check-danger" class="form-ext-input form-ext-input--danger" type="checkbox" checked />
        <label class="form-ext-label" for="check-danger">danger</label>
    </div>
</div>