Morningstar Design System v2.24.1

Variations

Default

Logic Mode

Default

Logic Mode

HTML

Web Component

<!-- Off -->
<div class="mds-switch">
    <label class="mds-switch__label" for="switch--96661">
        <input id="switch--96661" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- Off, Disabled -->
<div class="mds-switch">
    <label class="mds-switch__label" for="switch--44794">
        <input id="switch--44794" type="checkbox" role="switch" class="mds-switch__input" disabled>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- On -->
<div class="mds-switch">
    <label class="mds-switch__label" for="switch--65811">
        <input id="switch--65811" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- On, Disabled -->
<div class="mds-switch">
    <label class="mds-switch__label" for="switch--73142">
        <input id="switch--73142" type="checkbox" role="switch" class="mds-switch__input" disabled checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>

<!-- Off -->
<mds-switch name="default"> Logic Mode </mds-switch>
<!-- Off, Disabled -->
<mds-switch disabled name="default"> Logic Mode </mds-switch>
<!-- On -->
<mds-switch name="default" checked> Logic Mode </mds-switch>
<!-- On, Disabled -->
<mds-switch disabled checked name="default"> Logic Mode </mds-switch>

Without Label

Use when the purpose of a switch is clearly implied by its proximity to other content and controls.

Without Label

Logic Mode

Without Label

Logic Mode

HTML

Web Component

<!-- Off -->
<div class="mds-switch mds-switch--hide-label">
    <label class="mds-switch__label" for="switch--28731">
        <input id="switch--28731" type="checkbox" role="switch" class="mds-switch__input">
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- Off, Disabled -->
<div class="mds-switch mds-switch--hide-label">
    <label class="mds-switch__label" for="switch--14435">
        <input id="switch--14435" type="checkbox" role="switch" class="mds-switch__input" disabled>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- On -->
<div class="mds-switch mds-switch--hide-label">
    <label class="mds-switch__label" for="switch--56297">
        <input id="switch--56297" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<!-- On, Disabled -->
<div class="mds-switch mds-switch--hide-label">
    <label class="mds-switch__label" for="switch--56453">
        <input id="switch--56453" type="checkbox" role="switch" class="mds-switch__input" disabled checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>

<!-- Off -->
<mds-switch hidden-text name="without-label"> Logic Mode </mds-switch>
<!-- Off, Disabled -->
<mds-switch hidden-text disabled name="without-label"> Logic Mode </mds-switch>
<!-- On -->
<mds-switch hidden-text name="without-label" checked> Logic Mode </mds-switch>
<!-- On, Disabled -->
<mds-switch hidden-text disabled checked name="without-label"> Logic Mode </mds-switch>

Switch Group

Client Configuration Options

Display Overview/Investment

Display Account Details

Display Benchmark Returns

Allow Clients to Generate Reports

Display Document Manager

Switch Group

Display Overview/Investment

Display Account Details

Display Benchmark Returns

Allow Clients to Generate Reports

Display Document Manager

HTML

Web Component

<fieldset class="mds-switch__group" role="group">
    <legend class="mds-switch__group-label">
        Client Configuration Options
    </legend>
    <div class="mds-switch">
        <label class="mds-switch__label" for="switch--37437">
            <input id="switch--37437" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text">
                Display Overview/Investment
            </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="switch--37222">
            <input id="switch--37222" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text">
                Display Account Details
            </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="switch--52063">
            <input id="switch--52063" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text">
                Display Benchmark Returns
            </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="switch--9678">
            <input id="switch--9678" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text">
                Allow Clients to Generate Reports
            </span>
        </label>
    </div>
    <div class="mds-switch">
        <label class="mds-switch__label" for="switch--98830">
            <input id="switch--98830" type="checkbox" role="switch" class="mds-switch__input">
            <span class="mds-switch__text">
                Display Document Manager
            </span>
        </label>
    </div>
</fieldset>

<mds-switch-group label="Client Configuration Options">
    <mds-switch name="switch-grouped"> Display Overview/Investment </mds-switch>
    <mds-switch name="switch-grouped"> Display Account Details </mds-switch>
    <mds-switch name="switch-grouped"> Display Benchmark Returns </mds-switch>
    <mds-switch name="switch-grouped"> Allow Clients to Generate Reports </mds-switch>
    <mds-switch name="switch-grouped"> Display Document Manager </mds-switch>
</mds-switch-group>

Sizing

Sizing affects the switch size, text size, and internal spacing. The default size is medium, and you can use modifier classes or props to make the switch smaller or larger.

Small

Logic Mode

Medium (Default)

Logic Mode

Large

Logic Mode

Touch

Logic Mode

Small

Logic Mode

Medium (Default)

Logic Mode

Large

Logic Mode

Touch

Logic Mode

HTML

Web Component

<div class="mds-switch mds-switch--small">
    <label class="mds-switch__label" for="switch--52486">
        <input id="switch--52486" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>
<div class="mds-switch mds-switch--small mds-switch--hide-label">
    <label class="mds-switch__label" for="switch--99342">
        <input id="switch--99342" type="checkbox" role="switch" class="mds-switch__input" checked>
        <span class="mds-switch__text">
            Logic Mode
        </span>
    </label>
</div>

<mds-switch size="small" name="switch-small" checked> Logic Mode </mds-switch>
<mds-switch size="small" name="switch-small" hidden-text checked> Logic Mode </mds-switch>

When pairing switches and Forms, use the same size.
See mixin documentation for additional details on how to create media queries to switch to the touch size.

Use When

Turning on and off a feature, mode, or functionality.
Toggling elicits an immediate change in the UI.
Toggling elicits a change in background behavior without affecting the UI.

Don’t Use When

Requiring user action consent, such as accepting terms and conditions. Instead, use a Form checkbox.
Requesting multiple choices from a group of options. Instead, use a Form checkbox group.

Do use for a choice that elicits an immediate change in the UI, like enabling a disabled field.

Don‘t use a <a class="mds-link" href="/components/forms.html#checkbox">Checkbox</a>. — Don‘t use a Checkbox.

Do use for a choice that elicits a change in background functionality without affecting the UI, like disabling an email notification.

Do use for turning an option on and off, such as a data formatting rule.

Visual Language

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

Behaviors

Do use the same label text for both the on and off state.

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: Logic Mode
- Don't: Beast Mode

Errors

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--touch`	`mds-switch`	Adjusts styling to render a touch switch.
`mds-switch--hide-label`	`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.

Mixins

Touch Properties

Use this mixin to create media queries in your product styles to change switches to their touch variation.

@include mds-switch-touch-properties();

For example, switching to the touch variation on screens with a max-width of 500px:

// Your product SCSS
@media screen and (max-width: 500px) {
    @include mds-switch-touch-properties();
}

The mixin includes all CSS properties required to convert any size into the touch variation.
Use a media query that makes the most sense for your product, in addition to max-width, pointer: coarse is another helpful method for targeting touch screen devices.
If you don’t want every instance to change, consider using a wrapping class around the media query to target specific elements in your product.

Web Component

Switches are comprised of two separate web components, each with a dedicated API:

Switch - Renders the switch component and offers props for all offered variations and behaviors.
Switch Group - Wraps multiple <mds-switch> elements to present them as a group.

Switch

Props

When setting props as attributes on a custom HTML element, use kebab-case instead of camelCase.

Prop	Type	Validation	Default	Description
`additionalClass`	String	—	—	A space-separated list of class names that will be appended to the default `mds-switch` class.
`checked`	Boolean	—	`false`	Sets the `checked` attribute of the switch’s underlying checkbox.
`disabled`	Boolean	—	`false`	If `true`, applies the disabled state.
`hiddenText`	Boolean	—	`false`	If `true`, hides text, rendering the without label variation.
`name`	String	Required	—	Sets the `name` attribute for the switch.
`size`	String	One of: `small`, `medium`, `large`, `touch`	`medium`	Alters the size of the switch.
`text`	String	Required	—	The label text for the switch. Can also be passed via the default slot.
`value`	String	—	—	Sets the `value` attribute for the switch.

Slots

Default Slot

Any text passed in between the <mds-switch></mds-switch> tags will be used as the text content.

Usage Examples

Setting text, checked, and size via props:

<mds-switch name="switch_name" text="Switch Label" size="large" checked></mds-switch>

Switch Group

Props

When setting props as attributes on a custom HTML element, use kebab-case instead of camelCase.

Prop	Type	Validation	Default	Description
`additionalClass`	String	—	—	A space-separated list of class names that will be appended to the default `mds-switch-group` class.
`ariaDescribedby`	String	—	—	A space-separated list of element `id`, often Microcopy or a Field Error, whose content contains additional information about the switch group.
`label`	String	Required	—	Label for the switch group.

Slots

Default Slot

Pass two or more <mds-switch> elements between the <mds-switch-group></mds-switch-group> tags to set the content of the switch group.

Usage Examples

Setting label via a prop. Using the default slot for the switches in the group:

<mds-switch-group label="Choose your options">
    <mds-switch name="switch_name">Switch Label 1</mds-switch>
    <mds-switch name="switch_name">Switch Label 2</mds-switch>
</mds-switch-group>

Implementation

Always include a label even if it is hidden from the screen, to ensure there is descriptive text present for assistive technologies.

Best Practices

By default, switches include a role="switch" ARIA attribute to ensure they are accurately announced via assistive technologies.
By default, switch groups include a role="group" on the <fieldset> wrapping grouped switches.
Switch can be triggered by pressing spacebar.

Variations

Default

Without Label

Switch Group

Sizing

Use When

Don’t Use When

Visual Language

Behaviors

Editorial

Related UX Patterns

CSS

Class References

Mixins

Touch Properties

Web Component

Switch

Props

Slots

Default Slot

Usage Examples

Switch Group

Props

Slots

Default Slot

Usage Examples

Implementation

Best Practices