Toggle Switch

Binary on/off switches for boolean settings.

Basic Toggle

HTML 
<label class="ss-c-toggle_switch">
            <input type="checkbox" />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>

        <label class="ss-c-toggle_switch">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>

Toggle with Label

HTML 
<label class="ss-c-toggle_switch__label">
            <span class="ss-c-toggle_switch__text">Enable notifications</span>
            <span class="ss-c-toggle_switch">
                <input type="checkbox" />
                <span class="ss-c-toggle_switch__slider"></span>
            </span>
        </label>

        <label class="ss-c-toggle_switch__label">
            <span class="ss-c-toggle_switch">
                <input type="checkbox" checked />
                <span class="ss-c-toggle_switch__slider"></span>
            </span>
            <span class="ss-c-toggle_switch__text">Dark mode enabled</span>
        </label>

Toggle Sizes

Small Default Large
HTML 
<label class="ss-c-toggle_switch ss-c-toggle_switch--sm">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Small</span>

        <label class="ss-c-toggle_switch">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Default</span>

        <label class="ss-c-toggle_switch ss-c-toggle_switch--lg">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02">Large</span>

Disabled Toggle

Disabled off Disabled on
HTML 
<label class="ss-c-toggle_switch">
            <input type="checkbox" disabled />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Disabled off</span>

        <label class="ss-c-toggle_switch">
            <input type="checkbox" checked disabled />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02">Disabled on</span>

Toggle Panel

Expandable/collapsible content panels.

Basic Toggle Panel

Click to expand

This content is hidden until the panel is expanded. Click the header again to collapse.

HTML 
<details class="ss-c-toggle_panel">
            <summary class="ss-c-toggle_panel__header">Click to expand</summary>
            <div class="ss-c-toggle_panel__content">
                <p>
                    This content is hidden until the panel is expanded. Click
                    the header again to collapse.
                </p>
            </div>
        </details>

Initially Open Panel

This panel starts open

Use the "open" attribute to have the panel expanded by default.

HTML 
<details class="ss-c-toggle_panel" open>
            <summary class="ss-c-toggle_panel__header">
                This panel starts open
            </summary>
            <div class="ss-c-toggle_panel__content">
                <p>
                    Use the "open" attribute to have the panel expanded by
                    default.
                </p>
            </div>
        </details>

Multiple Panels

Section One

Content for section one.

Section Two

Content for section two.

Section Three

Content for section three.

HTML 
<details class="ss-c-toggle_panel ss-c-mb--02">
            <summary class="ss-c-toggle_panel__header">Section One</summary>
            <div class="ss-c-toggle_panel__content">
                <p>Content for section one.</p>
            </div>
        </details>

        <details class="ss-c-toggle_panel ss-c-mb--02">
            <summary class="ss-c-toggle_panel__header">Section Two</summary>
            <div class="ss-c-toggle_panel__content">
                <p>Content for section two.</p>
            </div>
        </details>

        <details class="ss-c-toggle_panel">
            <summary class="ss-c-toggle_panel__header">Section Three</summary>
            <div class="ss-c-toggle_panel__content">
                <p>Content for section three.</p>
            </div>
        </details>

Toggle Button

Buttons that toggle between active and inactive states.

Basic Toggle Button

HTML 
<button class="ss-c-button ss-c-toggle_button" aria-pressed="false">
            Toggle Off
        </button>

        <button
            class="ss-c-button ss-c-toggle_button ss-c-toggle_button--active"
            aria-pressed="true"
        >
            Toggle On
        </button>

Toggle Button Group

HTML 
<div
            class="ss-c-toggle_button_group"
            role="group"
            aria-label="Text alignment"
        >
            <button
                class="ss-c-button ss-c-toggle_button ss-c-toggle_button--active"
                aria-pressed="true"
            >
                Left
            </button>
            <button class="ss-c-button ss-c-toggle_button" aria-pressed="false">
                Center
            </button>
            <button class="ss-c-button ss-c-toggle_button" aria-pressed="false">
                Right
            </button>
        </div>

Toggle Colors

Toggle switches with semantic colors.

Colored Toggles

Primary Success Warning Danger
HTML 
<label class="ss-c-toggle_switch ss-c-toggle_switch--primary">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Primary</span>

        <label class="ss-c-toggle_switch ss-c-toggle_switch--success">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Success</span>

        <label class="ss-c-toggle_switch ss-c-toggle_switch--warning">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02 ss-c-mr--04">Warning</span>

        <label class="ss-c-toggle_switch ss-c-toggle_switch--danger">
            <input type="checkbox" checked />
            <span class="ss-c-toggle_switch__slider"></span>
        </label>
        <span class="ss-c-ml--02">Danger</span>