Material Design

Switches

Switches screenshot

Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

Design & API Documentation

Installation

npm install @material/switch

Basic Usage

HTML Structure

<div class="mdc-switch">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
        <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
    </div>
  </div>
</div>
<label for="basic-switch">off/on</label>

Styles

@import "@material/switch/mdc-switch";

JavaScript Instantiation

The Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.

import {MDCSwitch} from '@material/switch';

const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));

See Importing the JS component for more information on how to import JavaScript.

Variant

Initially Disabled Switch

Add the mdc-switch--disabled class to the mdc-switch element, and the disabled attribute to the mdc-switch__native-control element to disable the switch. This logic is handled by the MDCSwitchFoundation.setDisabled method, but you’ll want to avoid a FOUC by initially adding this class and attribute.

<div class="mdc-switch mdc-switch--disabled">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
      <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
    </div>
  </div>
</div>
<label for="another-basic-switch">off/on</label>

Initially “On” Switch

Add the mdc-switch--checked class to the mdc-switch element, and the checked attribute to the mdc-switch__native-control element to toggle the switch to “on”. This logic is handled by the MDCSwitchFoundation.setChecked method, but you’ll want to avoid a FOUC by initially adding this class and attribute.

<div class="mdc-switch mdc-switch--checked">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
      <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" checked>
    </div>
  </div>
</div>
<label for="another-basic-switch">off/on</label>

Style Customization

CSS Classes

CSS Class Description
mdc-switch Mandatory, for the parent element.
mdc-switch--disabled Optional, styles the switch as disabled
mdc-switch--checked Optional, styles the switch as checked (“on”)
mdc-switch__track Mandatory, for the track element.
mdc-switch__thumb-underlay Mandatory, for the ripple effect.
mdc-switch__thumb Mandatory, for the thumb element.
mdc-switch__native-control Mandatory, for the hidden input checkbox.

Sass Mixins

MDC Switch uses MDC Theme’s secondary color by default for the checked (toggled on) state. Use the following mixins to customize enabled switches. It is not currently possible to customize the color of a disabled switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.

Mixin Description
mdc-switch-toggled-on-color($color) Sets the base color of the track, thumb, and ripple when the switch is toggled on.
mdc-switch-toggled-off-color($color) Sets the base color of the track, thumb, and ripple when the switch is toggled off.
mdc-switch-toggled-on-track-color($color) Sets color of the track when the switch is toggled on.
mdc-switch-toggled-off-track-color($color) Sets color of the track when the switch is toggled off.
mdc-switch-toggled-on-thumb-color($color) Sets color of the thumb when the switch is toggled on.
mdc-switch-toggled-off-thumb-color($color) Sets color of the thumb when the switch is toggled off.
mdc-switch-toggled-on-ripple-color($color) Sets the color of the ripple surrounding the thumb when the switch is toggled on.
mdc-switch-toggled-off-ripple-color($color) Sets the color of the ripple surrounding the thumb when the switch is toggled off.

MDCSwitch Properties and Methods

Property Value Type Description
checked Boolean Setter/getter for the switch’s checked state
disabled Boolean Setter/getter for the switch’s disabled state

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCSwitchAdapter

Method Signature Description
addClass(className: string) => void Adds a class to the root element.
removeClass(className: string) => void Removes a class from the root element.
setNativeControlChecked(checked: boolean) Sets the checked state of the native control.
setNativeControlDisabled(disabled: boolean) Sets the disabled state of the native control.

MDCSwitchFoundation

Method Signature Description
setChecked(checked: boolean) => void Sets the checked value of the native control and updates styling to reflect the checked state.
setDisabled(disabled: boolean) => void Sets the disabled value of the native control and updates styling to reflect the disabled state.
handleChange(evt: Event) => void Handles a change event from the native control.

MDCSwitchFoundation Event Handlers

If wrapping the switch component it is necessary to add an event handler for native control change events that calls the handleChange foundation method. For an example of this, see the MDCSwitch component’s initialSyncWithDOM method.

Event Element Selector Foundation Handler
change .mdc-switch__native-control handleChange()