# 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 ```html

off/on ``` ## Variant ### Disabled Switch Users can add the `disabled` attribute directly to the `` element or a parent `

` element to disable a switch. ```html

off/on ``` ## 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.