Lexicon v1.0.32

Toggles

For customizing toggles, see extending-toggles.

Toggle Switch

Browser must support :checked pseudo class on checkbox element. For older browsers set css on input.toggle-switch to position: static and hide the .toggle-switch-bar element to display a regular checkbox.

<div class="form-group">
    <label>
        <input class="toggle-switch" type="checkbox">

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle"></span>
        </span>
    </label>
</div>

Toggle Switch with Data Attributes

Use data attributes data-label-on="" and data-label-off="" on <span class="toggle-switch-handle"></span> to display specific text when the switch is on and off.

<div class="form-group">
    <label>
        <input class="toggle-switch" type="checkbox">
        <span class="toggle-switch-label">Toggle Switch with data-label-on</span>

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle" data-label-off="" data-label-on="ON">
            </span>
        </span>
    </label>
</div>
<div class="form-group">
    <label>
        <input class="toggle-switch" type="checkbox">
        <span class="toggle-switch-label">Toggle Switch with data-label on and data-label-off</span>

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle" data-label-off="Switch is off." data-label-on="Switch is on.">
            </span>
        </span>
    </label>
</div>

Toggle Switch Text

Add additional text with class toggle-switch-text.

Toggle Switches with Icons

Add an icon to the switch for the on position with <span class="button-icon button-icon-on icon-volume-up toggle-switch-icon"></span>.

Add an icon to the switch for the off position with <span class="button-icon button-icon-off icon-volume-off toggle-switch-icon"></span>.

Substitute icon-volume-up / icon-volume-down with any font awesome icon.

<div class="form-group">
    <label>
        <input class="toggle-switch" type="checkbox">
        <span class="toggle-switch-label">Toggle Switch with data-label on and data-label-off</span>

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle" data-label-off="Locked" data-label-on="Edit">
                <span class="button-icon button-icon-on icon-pencil toggle-switch-icon"></span>
                <span class="button-icon button-icon-off icon-lock toggle-switch-icon"></span>
            </span>
        </span>
    </label>
</div>

Toggle Switches with Icons (Alternate)

Add an icon to the switch for the on position with <span aria-hidden="true" class="icon-ok toggle-switch-icon toggle-switch-icon-on"></span>.

Add an icon to the switch for the off position with <span aria-hidden="true" class="icon-remove toggle-switch-icon toggle-switch-icon-off"></span>.

Substitute icon-ok / icon-remove with any font awesome icon.

<div class="form-group">
    <label>
        <input class="toggle-switch" type="checkbox">

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle">
                <span aria-hidden="true" class="icon-ok toggle-switch-icon toggle-switch-icon-on"></span>
                <span aria-hidden="true" class="icon-remove toggle-switch-icon toggle-switch-icon-off"></span>
            </span>
        </span>
    </label>
</div>

Disabled Toggle Switches

Disable a toggle-switch by adding the attribute disabled="disabled" to <input type="checkbox">.

<div class="form-group">
    <label>
        <input class="toggle-switch" disabled type="checkbox">

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle">
                <span aria-hidden="true" class="icon-ok toggle-switch-icon toggle-switch-icon-on"></span>
                <span aria-hidden="true" class="icon-remove toggle-switch-icon toggle-switch-icon-off"></span>
            </span>
        </span>
    </label>
</div>

Toggle Card

A checkbox styled like a card.

<div class="form-group">
    <label>
        <input class="toggle-card" type="checkbox" value="">
        <div class="toggle-card-container">
            <div class="toggle-card-cell">
                <div class="toggle-card-icon">
                    <span aria-hidden="true" class="icon-ok"></span>
                </div>
                <div class="toggle-card-label">
                    <span>Regular Label</span>
                </div>
            </div>
        </div>
    </label>
</div>
<div class="form-group">
    <label>
        <input class="toggle-card" type="checkbox" value="">
        <div class="toggle-card-container">
            <div class="toggle-card-cell">
                <div class="toggle-card-icon">
                    <span aria-hidden="true" class="icon-lock toggle-card-off"></span>
                    <span aria-hidden="true" class="icon-ok toggle-card-on"></span>
                </div>
                <div class="toggle-card-label">
                    <span>Regular Label</span>
                </div>
            </div>
        </div>
    </label>
</div>
<div class="form-group">
    <label>
        <input class="toggle-card" type="checkbox" value="">
        <div class="toggle-card-container">
            <div class="toggle-card-cell">
                <div class="toggle-card-icon">
                    <span aria-hidden="true" class="icon-lock toggle-card-off"></span>
                    <span aria-hidden="true" class="icon-ok toggle-card-on"></span>
                </div>
                <div class="toggle-card-label">
                    <span class="toggle-card-off">labelOff</span>
                    <span class="toggle-card-on">labelOn</span>
                </div>
            </div>
        </div>
    </label>
</div>

Disabled Toggle Cards

Disable a toggle-card by adding the attribute disabled="disabled" to <input class="toggle-card" type="checkbox">.

<div class="form-group">
    <label>
        <input class="toggle-card" disabled type="checkbox" value="">
        <div class="toggle-card-container">
            <div class="toggle-card-cell">
                <div class="toggle-card-icon">
                    <span aria-hidden="true" class="icon-lock toggle-card-off"></span>
                    <span aria-hidden="true" class="icon-ok toggle-card-on"></span>
                </div>
                <div class="toggle-card-label">
                    <span class="toggle-card-off">labelOff</span>
                    <span class="toggle-card-on">labelOn</span>
                </div>
            </div>
        </div>
    </label>
</div>