@shortcm/switch

Switches

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

Design & API Documentation

• Material Design guidelines: Switches
• Demo

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 initialSyncWithDOM method.

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