Updated: This page has been updated. See DESY-191 for details.

Toggle

A toggle lets you switch a setting between two states, such as on or off. It can also be used for dark / light mode.

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Anatomy

Toggle
Label text

Not active

There are two different states for a toggle — “Active” and “Not active”.

Example
HTML

Enabled

Hover

Focused

Error

Disabled

<div class="docs-component-states-row">
    <div>
        <div class="switch">
            <input type="checkbox" name="toggle-not-active-enabled" id="toggle-not-active-enabled">
            <label for="toggle-not-active-enabled" class="togglemark">Enabled</label>
        </div>
    </div>
    <div>
        <div class="switch hover">
            <input type="checkbox" name="toggle-not-active-hover" id="toggle-not-active-hover">
            <label for="toggle-not-active-hover" class="togglemark">Hover</label>
        </div>
    </div>
    <div>
        <div class="switch focus">
            <input type="checkbox" name="toggle-not-active-focused" id="toggle-not-active-focused">
            <label for="toggle-not-active-focused" class="togglemark">Focused</label>
        </div>
    </div>
    <div>
        <div class="switch has-error">
            <input type="checkbox" name="toggle-not-active-error" id="toggle-not-active-error">
            <label for="toggle-not-active-error" class="togglemark">Error</label>
        </div>
    </div>
    <div>
        <div class="switch">
            <input type="checkbox" name="toggle-not-active-disabled" id="toggle-not-active-disabled" disabled>
            <label for="toggle-not-active-disabled" class="togglemark">Disabled</label>
        </div>
    </div>
</div>

Active

There are two different states for a toggle — “Active” and “Not active”.

Example
HTML

Enabled

Hover

Focused

Error

Disabled

<div class="docs-component-states-row">
    <div>
        <div class="switch">
            <input type="checkbox" name="toggle-active-enabled" id="toggle-active-enabled" checked>
            <label for="toggle-active-enabled" class="togglemark">Enabled</label>
        </div>
    </div>
    <div>
        <div class="switch hover">
            <input type="checkbox" name="toggle-active-hover" id="toggle-active-hover" checked>
            <label for="toggle-active-hover" class="togglemark">Hover</label>
        </div>
    </div>
    <div>
        <div class="switch focus">
            <input type="checkbox" name="toggle-active-focused" id="toggle-active-focused" checked>
            <label for="toggle-active-focused" class="togglemark">Focused</label>
        </div>
    </div>
    <div>
        <div class="switch has-error">
            <input type="checkbox" name="toggle-active-error" id="toggle-active-error" checked>
            <label for="toggle-active-error" class="togglemark">Error</label>
        </div>
    </div>
    <div>
        <div class="switch">
            <input type="checkbox" name="toggle-active-disabled" id="toggle-active-disabled" checked disabled>
            <label for="toggle-active-disabled" class="togglemark">Disabled</label>
        </div>
    </div>
</div>

Usage

Use a toggle when you need a component with two distinct on / off states. It is ideal for showing that a specific filter option is currently active.

Example
HTML

Yes

Clickable area

It is crucial for both the label and the toggle to be clickable to ensure usability and accessibility for all users. By making the label also clickable, you provide a much larger and more forgiving target, which reduces user frustration and the chance of accidental errors.

Accessibility

Keyboard interaction

All toggles should be reachable via TAB and SHIFT+TAB keys. Pressing SPACE on a focused toggle flips its state — handled natively by the underlying <input type="checkbox">.

Example
HTML

Off

<div class="docs-component-states-row">
    <div class="switch focus">
        <input type="checkbox" name="toggle-keyboard-off" id="toggle-keyboard-off">
        <label for="toggle-keyboard-off" class="togglemark">Off</label>
    </div>
    <div class="switch focus">
        <input type="checkbox" name="toggle-keyboard-on" id="toggle-keyboard-on" checked>
        <label for="toggle-keyboard-on" class="togglemark">On</label>
    </div>
</div>

Specs

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Basic example

A toggle uses the markup of a custom checkbox, but applies the .switch class to render a toggle pill. Toggles 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">Radio 2</span>
    </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">Radio 4</label>
    </div>
</form>

Label position

To align the toggle to the right and place the label on the left, add the .switch-rtl class to the .switch wrapper.

Example
HTML

Checkbox with label on the left

<div>
    <div class="switch switch-rtl">
        <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">Checkbox with label on the left</label>
    </div>
</div>

Switch size

Deprecated 2.6 — This size variant will be removed in 3.0. Use the default .switch (32 × 16 px) instead, which is the canonical Figma size.

Adding the .switch-lg class to the .switch wrapper renders a larger 48 × 24 px toggle. This larger size is not part of the Figma design specification and is retained for legacy usages.

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

Deprecated 2.6 — This pattern will be removed in 3.0. Use the default .switch with an external <label> instead, which is the canonical Figma pattern.

The legacy .switch-label class rendered a wider pill with embedded ON / OFF text.

Example
HTML

Toggle 1 (pre-checked)

Toggle 2

Toggle 3 (disabled)

Toggle 4

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

Light / Dark mode switch

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

The .light-dark-toggle class renders the refreshed flat switch: a 48 × 24 px track with a white thumb carrying a sun glyph, matching the Figma Switch (light & dark) component.

Example
HTML

Light mode Dark mode

<div>
    <label class="switch 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 docs-navbar-static" 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="false" 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" id="vudNavToggleNavDdMenu">
                    <li class="form-group">
                        <label for="vudNavToggleNavDdCompany">Company</label>
                        <div class="dropdown">
                            <button type="button" id="vudNavToggleNavDdCompany" class="dropdown-toggle dropdown-field" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Company
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="vudNavToggleNavDdCompany">
                                <li class="dropdown-item" role="none"><a href="#!" role="menuitem">Company</a></li>
                                <li class="dropdown-item" role="none"><a href="#!" role="menuitem">Another company</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="divider"></li>
                    <li class="form-group">
                        <label for="vudNavToggleNavDdLanguage">Language</label>
                        <div class="dropdown">
                            <button type="button" id="vudNavToggleNavDdLanguage" class="dropdown-toggle dropdown-field has-value" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-sweden"></span> Swedish
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="vudNavToggleNavDdLanguage">
                                <li class="dropdown-item" role="none"><a href="#!" role="menuitem"><span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-sweden"></span> Swedish</a></li>
                                <li class="dropdown-item" role="none"><a href="#!" role="menuitem"><span aria-hidden="true" class="spirisicon spirisicon-flags spirisicon-english"></span> English</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-item">
                        <a href="#!">List item</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-item">
                        <a href="#!" class="d-flex align-items-center">
                            <span aria-hidden="true" class="spirisicon spirisicon-digital-invoices-documents"></span> List item
                            <span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-chevron-right ms-auto"></span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <label class="switch light-dark-toggle" for="vudNavToggleNavDdMode">
                            <span class="light">Light mode</span>
                            <input id="vudNavToggleNavDdMode" type="checkbox" name="vudNavToggleNavDdMode">
                            <span class="togglemark">
                                <b class="details"></b>
                            </span>
                            <span class="dark">Dark mode</span>
                        </label>
                    </li>
                    <li class="divider divider-strong"></li>
                    <li class="text-center">
                        <button class="btn btn-secondary" type="button">
                            <span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-logout"></span>
                            Sign out
                        </button>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

Legacy animated switch

The .light-dark-toggle-legacy class preserves the previous animated sky / sun / clouds / stars switch for consumers who need the old look. The inner markup is identical to .light-dark-toggle, so switching back is a single class change.

Example
HTML

Light mode Dark mode

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