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

HTML Structure

<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">off/on</label>

Disabled Switch

Users can add disabled directly to the input element or set the fieldset containing the switch to disabled to disable a switch. Disabled switches cannot be interacted with and have no visual interaction effect.

<div class="mdc-switch">
  <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">off/on</label>

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