Package Exports

@material/switch/dist/mdc.switch.css
@material/switch/dist/mdc.switch.min.css
@material/switch/mdc-switch.scss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/switch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Switches

Switches toggle the state of a single settings option on or off, and are mobile preferred.

Design & API Documentation

Installation

npm install @material/switch

Basic Usage

HTML Structure

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

Variant

Disabled Switch

Users can add the disabled attribute directly to the <input> element or a parent <fieldset> element to disable a switch.

<div class="mdc-switch">
  <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
  <div class="mdc-switch__background">
    <div class="mdc-switch__knob"></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__native-control`	Mandatory, for the input checkbox.
`mdc-switch__background`	Mandatory, for the background element.
`mdc-switch__knob`	Mandatory, for the knob element.

Sass Mixins

The following mixins apply only to enabled switches in the on (checked) state. It is not currently possible to customize the color of a disabled or off (unchecked) switch.

Mixin	Description
`mdc-switch-track-color($color)`	Sets the track color.
`mdc-switch-knob-color($color)`	Sets the knob color.
`mdc-switch-focus-indicator-color($color)`	Sets the focus indicator color.