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

The MDC Switch component is a spec-aligned switch component adhering to the Material Design Switch requirements. It works without JavaScript.

Design & API Documentation

Installation

npm install --save @material/switch

Usage

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

Disabled

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

Classes

Block

The block class is mdc-switch. This defines the top-level switch element.

Modifier

The provided modifiers are:

Class	Description
`mdc-switch--disabled`	Applies disabled style to disabled switches.

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