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="--41270">
        <input id="--41270" 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="--29054">
        <input id="--29054" 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. — Do describe a switch’s functionality using a short label that doesn’t change regardless of state.

dont pair two labels with a switch. — Don‘t pair two labels with a switch.

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="--17116">
        <input id="--17116" 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="--87523">
        <input id="--87523" 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="--47133">
            <input id="--47133" 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="--95173">
            <input id="--95173" 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="--30637">
            <input id="--30637" 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="--68666">
            <input id="--68666" 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="--36901">
            <input id="--36901" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text"> Friday </span>
        </label>
    </div>
</fieldset>

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--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