Product Name

Switches

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

Variations

With Label

Default
Hover
Active
Focus
On
<div class="mds-switch">
    <label class="mds-switch__label" for="--83445">
        <input id="--83445" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>
Disabled, Off
Disabled, On
<div class="mds-switch mds-switch--disabled">
    <label class="mds-switch__label" for="--3727">
        <input id="--3727" 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.
Don‘t pair two labels with a switch.
Don‘t pair two labels with a switch.

Without Label

Without Label
Without Label, Hover
Without Label, Active
Without Label, Focus
Without Label, On
<div class="mds-switch mds-switch--standalone">
    <label class="mds-switch__label" for="--19306">
        <input id="--19306" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text"> Logic Mode </span>
    </label>
</div>
Without Label, Disabled, Off
Without Label, Disabled, On
<div class="mds-switch mds-switch--disabled mds-switch--standalone">
    <label class="mds-switch__label" for="--6572">
        <input id="--6572" 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:
<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="--9113">
            <input id="--9113" 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="--36675">
            <input id="--36675" 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="--56474">
            <input id="--56474" 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="--55421">
            <input id="--55421" 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="--29013">
            <input id="--29013" 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.

©2017 Morningstar, Inc. All rights reserved. Terms of Use