Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
npm install @material/switch
<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>
@import "@material/switch/mdc-switch";
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.
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>
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>
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. |
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. |
mdc-switch-ripple-size($ripple-size) |
Sets the ripple size of the switch. |
mdc-switch-density($density-scale) |
Sets density scale for switch. Supported density scales are -5 , -4 , -3 , -2 , -1 , and 0 (default). |
mdc-switch-ripple-states-opacity($opacity-map) |
Sets the opacity of the ripple surrounding the thumb in any of the hover , focus , or press states. The opacity-map can specify any of these states as keys. States not specified in the map resort to default opacity values. |
Property | Value Type | Description |
---|---|---|
checked |
Boolean | Setter/getter for the switch's checked state |
disabled |
Boolean | Setter/getter for the switch's disabled state |
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.
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. |
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. |
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's initialSyncWithDOM
method.
Event | Element Selector | Foundation Handler |
---|---|---|
change |
.mdc-switch__native-control |
handleChange() |