Toggle

A switch is a digital ON/OFF toggle for controlling one of two states similar to a physical light switch.

Use when

The user needs to decide between two opposing states (ON/OFF)
The state is typically a user preference
The selected choice needs to be visually prominent
The controlled state is independent of other controls on the same level
The effect is immediate when changing state
You want it to run on touch screens (too), since checkboxes are typically too small for finger touch area
It is for some kind of control panel as opposed to a checkbox which is mainly used for input

Basic example

A switch has the markup of a custom checkbox, but uses the .switch class to render a toggle switch. Switches also support the disabled attribute.

Example
HTML

<form>
    <div class="switch">
        <input id="option_1" type="checkbox" name="option_value_1" checked="checked" value="Value 1">
        <label for="option_1" class="togglemark">Checkbox 1 (pre-checked)</label>
    </div>
    <br>
    <label for="option_2" class="switch">
        <input id="option_2" type="checkbox" name="option_value_2" value="Value 2">
        <span class="togglemark">Checkbox 2</span>
    </label>
    <br>
    <label for="option_3" class="switch">
        <input id="option_3" type="checkbox" name="option_value_3" checked="checked" disabled value="Value 3">
        <span class="togglemark">Checkbox disabled (pre-checked)</span>
    </label>
    <br>
    <label for="option_4" class="switch">
        <input id="option_4" type="checkbox" name="option_value_4" disabled value="Value 4">
        <span class="togglemark">Checkbox disabled</span>
    </label>
    <br>
    <div class="switch">
        <input id="option_5" type="checkbox" name="option_value_5" value="Value 5">
        <label for="option_5" class="togglemark">Checkbox 5</label>
    </div>
</form>
<br />
<form>
    <div class="switch">
        <input id="option_6" type="radio" name="option_value_A" checked="checked" value="Value 6">
        <label for="option_6" class="togglemark">Radio 1 (preselected)</label>
    </div>
    <br>
    <label for="option_7" class="switch">
        <input id="option_7" type="radio" name="option_value_A" value="Value 7">
        <span class="togglemark"></span>Radio 2
    </label>
    <br>
    <label for="option_8" class="switch">
        <input id="option_8" type="radio" name="option_value_A" disabled value="Value 8">
        <span class="togglemark">Radio 3 (disabled)</span>
    </label>
    <br>
    <div class="switch">
        <input id="option_9" type="radio" name="option_value_A" value="Value 9">
        <label for="option_9" class="togglemark"></label>Radio 4
    </div>
</form>

Options

Switch size

By adding .switch-lg class to the switch wrapper .switch, it will transform the switch into a bigger version.

Example
HTML

<form>
    <div class="switch switch-lg">
        <input id="option_B_1" type="checkbox" name="option_value_B_1" checked="checked" value="Value 1">
        <label for="option_B_1" class="togglemark">Checkbox 1</label>
    </div>
    <br>
    <label for="option_B_2" class="switch switch-lg">
        <input id="option_B_2" type="checkbox" name="option_value_B_2" value="Value 2">
        <span class="togglemark">Checkbox 2</span>
    </label>
    <br>
    <label for="option_B_3" class="switch switch-lg">
        <input id="option_B_3" type="checkbox" name="option_value_B_3" checked="checked" disabled value="Value 3">
        <span class="togglemark">Checkbox disabled</span>
    </label>
</form>
<br />
<form>
    <div class="switch switch-lg">
        <input id="option_C_1" type="radio" name="option_value_C" value="Value 1" checked>
        <label for="option_C_1" class="togglemark">Radio 1 (preselected)</label>
    </div>
    <br>
    <label for="option_C_2" class="switch switch-lg">
        <input id="option_C_2" type="radio" name="option_value_C" value="Value 2">
        <span class="togglemark">Radio 2</span>
    </label>
    <br>
    <label for="option_C_3" class="switch switch-lg">
        <input id="option_C_3" type="radio" name="option_value_C" disabled value="Value 3">
        <span class="togglemark">Radio 3 (disabled)</span>
    </label>
</form>

Switch with label

The label for the switch is limited to the ON/OFF option, to enabled it You need to add the.switch-label class to the switch wrapper .switch.

Example
HTML

Checkbox 1 (pre-checked)

Checkbox 2

Checkbox 3 (disabled)

Checkbox 4

<div class="switch switch-label">
    <input id="ck1swlglabel" name="ck1swlg" checked="checked" type="checkbox">
    <label for="ck1swlglabel" class="togglemark">Checkbox 1 (pre-checked)</label>
</div>
<br>
<div class="switch switch-label">
    <input id="ck2swlglabel" name="ck2swlg" type="checkbox">
    <label for="ck2swlglabel" class="togglemark">Checkbox 2</label>
</div>
<br>
<div class="switch switch-label">
    <input id="ck3swlglabel" name="ck3swlg" disabled="" checked="checked" type="checkbox">
    <label for="ck3swlglabel" class="togglemark"></label>Checkbox 3 (disabled)
</div>
<br>
<div class="switch switch-label">
    <input id="ck4swlglabel" name="ck4swlg" type="checkbox">
    <label for="ck4swlglabel" class="togglemark"></label>Checkbox 4
</div>

Label position

You have also the option to align the checkbox/switcher to the right and to have the label on the left. For this simply add .switch-rtl class like in the examples below.

Example
HTML

Default size

Default size checkbox with label on the left

Large size

Large size checkbox with label on the left

With ON/OFF label

Checkbox with ON/OFF and label on the left

<div>
    <p class="bold mb-8">Default size</p>
    <div class="switch switch-rtl mb-24">
        <input id="option_A_1_2" type="checkbox" name="option_A_1_2" checked="checked" value="Value 1">
        <label for="option_A_1_2" class="togglemark">Default size checkbox with label on the left</label>
    </div>

    <p class="bold mb-8">Large size</p>
    <label for="option_B_1_2" class="switch switch-rtl switch-lg mb-24">
        <input id="option_B_1_2" type="checkbox" name="option_B_1_2" value="Value 2">
        <span class="togglemark">Large size checkbox with label on the left</span>
    </label>

    <p class="bold mb-8">With ON/OFF label</p>
    <label class="switch switch-label switch-rtl " for="option_C_1_2">
        <input id="option_C_1_2" type="checkbox" name="option_C_1_2">
        <span class="togglemark">Checkbox with ON/OFF and label on the left</span>
    </label>
</div>

Light/Dark mode switch

The Mode switch/toggle is used to switch between Standard (light) mode and Dark mode. It should be easily accessible via the user profile dropdown in the top menu.

Example
HTML

Light mode Dark mode

<div>
    <label class="switch switch-label light-dark-toggle" for="option-example">
        <b class="light">Light mode</b>
        <input id="option-example" type="checkbox" name="option-example">
        <span class="togglemark">
            <b class="details"></b>
        </span>
        <b class="dark">Dark mode</b>
    </label>
</div>

<header class="navbar navbar-default" id="nc4navTopMain1-1" role="navigation">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="#!" role="button" aria-label="Visma Project Name">Visma Project Name</a>
        </div>
    </div>
    <nav class="collapse navbar-collapse" id="nc4navCollapseMain1-1" aria-label="Menu">
        <ul class="nav navbar-nav nav-tabs first-level" id="nc4navFlMenu1-1" role="menubar" aria-label="Menu"> </ul>
        <ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
            <li class="dropdown user-dropdown">
                <a href="#!" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" aria-expanded="true" role="button" aria-label="Information area">
                    Christian McBale Jr.
                    <span class="spirisicon spirisicon-user"></span>
                    <small class="selectedContext">Cool Company name AB</small>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu company-selection" role="menu" style="top:auto; bottom: calc(100% + 0.2rem);">
                    <li class="user-details-area clear" role="menuitem">
                        <div title="[email protected]">
                            <div class="user-image">
                                <img src="../assets/docs/img/avatar.png" alt="User avatar image">
                            </div>
                            <div class="user-text">
                                <span>Christian McBale Jr.</span>
                                <span class="text-disabled">[email protected]</span>
                            </div>
                        </div>
                    </li>
                    <li class="divider"></li>
                    <li role="menuitem">
                        <a href="#!">My profile</a>
                    </li>
                    <li role="menuitem">
                        <a href="#!">Language</a>
                    </li>
                    <li role="menuitem">
                        <a href="#!">My location</a>
                    </li>
                    <li class="divider"></li>
                    <li role="menuitem">
                        <a href="#!">Help</a>
                    </li>
                    <li role="menuitem">
                        <a href="#!">Report a problem</a>
                    </li>
                    <li class="divider"></li>
                    <li role="menuitem">
                        <label class="switch switch-label light-dark-toggle" for="option-example2">
                            <b class="light">Light mode</b>
                            <input id="option-example2" type="checkbox" name="option-example2" disabled>
                            <span class="togglemark">
                                <b class="details"></b>
                            </span>
                            <b class="dark">Dark mode</b>
                        </label>
                    </li>
                    <li class="divider divider-strong"></li>
                    <li class="context-footer company-selection-footer clear" role="menuitem">
                        <a href="#!" class="log-out-link spirisicon spirisicon-sm spirisicon-logout">Log out</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>