Switches

Switches afford a choice between one of two opposing states or options.

Variations

With Label

Default

Logic Mode

Hover

Logic Mode

Active

Logic Mode

Focus

Logic Mode

White Light Dark Black

<div class="mds-switch">
    <label class="mds-switch__label" for="--12780">
        <input id="--12780" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>

Disabled, Off

Logic Mode

Disabled, On

Logic Mode

White Light Dark Black

<div class="mds-switch mds-switch--disabled">
    <label class="mds-switch__label" for="--3764">
        <input id="--3764" type="checkbox" role="switch" class="mds-switch__input" disabled>
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>

Do describe a switch’s functionality using a short label that doesn’t change regardless of state.

Without Label

Logic Mode

Without Label, Hover

Logic Mode

Without Label, Active

Logic Mode

Without Label, Focus

Logic Mode

Without Label, On

Logic Mode

White Light Dark Black

<div class="mds-switch mds-switch--standalone">
    <label class="mds-switch__label" for="--7139">
        <input id="--7139" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>

Without Label, Disabled, Off

Logic Mode

Without Label, Disabled, On

Logic Mode

White Light Dark Black

<div class="mds-switch mds-switch--disabled mds-switch--standalone">
    <label class="mds-switch__label" for="--97512">
        <input id="--97512" type="checkbox" role="switch" class="mds-switch__input" disabled>
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>

Switch Group

Default

Select all days that apply:

Monday

Tuesday

Wednesday

Thursday

Friday

White Light Dark Black

<fieldset class="mds-switch__group" role="group">
    <legend class="mds-switch__group-label"> Select all days that apply: </legend>
    <div class="mds-switch">
        <label class="mds-switch__label" for="--40378">
            <input id="--40378" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Monday </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="--97658">
            <input id="--97658" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Tuesday </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="--19016">
            <input id="--19016" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Wednesday </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="--69498">
            <input id="--69498" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Thursday </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="--82427">
            <input id="--82427" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Friday </span>
        </label>
    </div>
</fieldset>

Sizing

Sizing affects the switch size, text size, and internal spacing. The default size is medium, and you can use a modifier class to make the switch smaller (mds-switch--small) or larger (mds-switch--large).

<div class="mds-switch mds-switch--small">
    <label class="mds-switch__label" for="--15021">
        <input id="--15021" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>
<br/>
<div class="mds-switch mds-switch--small mds-switch--standalone">
    <label class="mds-switch__label" for="--27721">
        <input id="--27721" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>

When pairing switches and Forms, use the same size.

Guidelines

Use When

Presenting a choice between two opposite options, i.e., “On/Off”, “Yes/No”, “Show/Hide”.
Turning functionality on and off.

Don’t Use When

Requiring user action, such as accepting Terms of Service. Instead, use a Form checkbox.
Requesting multiple choices from a group of options. Instead, use a Form checkbox group.

Editorial

Avoid acronyms.
Aim for 2 to 5 words.
When using a switch to control a “Mode”, make sure your modifier is specific and maps well to a user’s expectation once the switch is turned on.
- Do: Data Mode, Logic Mode
- Don't: Beast Mode

Accessibility

Include a role="switch" ARIA attribute to represent “On/Off” rather than checked/unchecked states.
Include role="group" for grouped switches.
The switch can be triggered by pressing spacebar.
Always include an associated label even if it is hidden from the screen.
If hiding label text, add aria-label to an element (i.e., section title) to further enhance accessibility.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-switch`	`<div>`	At parent level, this applies base-switch styles to an element.
`.mds-switch--small`	`.mds-switch`	Adjusts styling to render a small switch.
`.mds-switch--large`	`.mds-switch`	Adjusts styling to render a large switch.
`.mds-switch--hover`	`.mds-switch`	Applies hover state.
`.mds-switch--active`	`.mds-switch`	Applies active state.
`.mds-switch--focus`	`.mds-switch`	Applies focus state.
`.mds-switch--disabled`	`.mds-switch`	Applies disabled state. To properly disable interaction with the switch, add `disabled` attribute to `input`.
`.mds-switch--standalone`	`.mds-switch`	Hides label text although text is still readable by screen readers.
`.mds-switch__group`	`<fieldset>`	Semantically structures a group of switches. Always include `<legend>` as a prelude for the switches.
`.mds-switch__field-group--horizontal`	`<div>`	Apply to a parent wrapper of a fieldset to convert switches layout from vertical to horizontal.

Link Template