### Toggle Switch

Binary on/off switches for boolean settings.

#### Basic Toggle

HTML

    <label class="toggle_switch">
                <input type="checkbox" />
                <span class="toggle_switch__slider"></span>
            </label>

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

#### Toggle with Label

Enable notifications Dark mode enabled
HTML

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

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

#### Toggle Sizes

Small Default Large
HTML

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

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

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

#### Disabled Toggle

Disabled off Disabled on
HTML

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

            <label class="toggle_switch">
                <input type="checkbox" checked disabled />
                <span class="toggle_switch__slider"></span>
            </label>
            <span class="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="toggle_panel">
                <summary class="toggle_panel__header">Click to expand</summary>
                <div class="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="toggle_panel" open>
                <summary class="toggle_panel__header">
                    This panel starts open
                </summary>
                <div class="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="toggle_panel mb--02">
                <summary class="toggle_panel__header">Section One</summary>
                <div class="toggle_panel__content">
                    <p>Content for section one.</p>
                </div>
            </details>

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

            <details class="toggle_panel">
                <summary class="toggle_panel__header">Section Three</summary>
                <div class="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="button toggle_button" aria-pressed="false">
                Toggle Off
            </button>

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

#### Toggle Button Group

HTML

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

### Toggle Colors

Toggle switches with semantic colors.

#### Colored Toggles

Primary Success Warning Danger
HTML

    <label class="toggle_switch toggle_switch--primary">
                <input type="checkbox" checked />
                <span class="toggle_switch__slider"></span>
            </label>
            <span class="ml--02 mr--04">Primary</span>

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

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

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

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!