Cirrus

#Toggle

Toggles are CSS only components that are great for touch devices for user selection.

#Basics

Toggles are a custom Cirrus component not standard to the HTML spec and can be used as an alternative to checkboxes.

Like the other extended form controls, toggles are built around using classes that have the form-ext-* prefix.

The structure of a toggle is as follows:

  • form-ext-control
    • form-ext-toggle__label
      • span
      • form-ext-toggle
        • form-ext-input
        • form-ext-toggle__toggler
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle off</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle on</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>

#Stylized

The toggles also come in many different variations.

To make the toggle disabled, add the disabled property on the input itself.

<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle off</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" disabled />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle on</span>
        <div class="form-ext-toggle">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" disabled checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>

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

<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>dark</span>
        <div class="form-ext-toggle form-ext-toggle--dark">
            <input name="toggleCheckbox-dark" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>primary</span>
        <div class="form-ext-toggle form-ext-toggle--primary">
            <input name="toggleCheckbox-primary" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>link</span>
        <div class="form-ext-toggle form-ext-toggle--link">
            <input name="toggleCheckbox-link" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>info</span>
        <div class="form-ext-toggle form-ext-toggle--info">
            <input name="toggleCheckbox-info" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>success</span>
        <div class="form-ext-toggle form-ext-toggle--success">
            <input name="toggleCheckbox-success" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>warning</span>
        <div class="form-ext-toggle form-ext-toggle--warning">
            <input name="toggleCheckbox-warning" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>danger</span>
        <div class="form-ext-toggle form-ext-toggle--danger">
            <input name="toggleCheckbox-danger" type="checkbox" class="form-ext-input" checked />
            <div class="form-ext-toggle__toggler"><i></i></div>
        </div>
    </label>
</div>

#Glyphs

You can also embed glyphs within your toggles. For the example used below, you must have FontAwesome's CSS library loaded on the page.

<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle success</span>
        <div class="form-ext-toggle form-ext-toggle--success">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input">
            <div class="form-ext-toggle__toggler"><i class="fa" data-check-icon="" data-uncheck-icon="" aria-hidden="true"></i></div>
        </div>
    </label>
</div>
<div class="form-ext-control">
    <label class="form-ext-toggle__label"><span>Toggle error</span>
        <div class="form-ext-toggle form-ext-toggle--error">
            <input name="toggleCheckbox" type="checkbox" class="form-ext-input" checked="">
            <div class="form-ext-toggle__toggler"><i class="fa" data-check-icon="" data-uncheck-icon="" aria-hidden="true"></i></div>
        </div>
    </label>
</div>