.. | ||
deprecated | ||
images | ||
test | ||
_index.scss | ||
_switch-theme.scss | ||
_switch.scss | ||
.npmignore | ||
mwc-switch-base.ts | ||
mwc-switch.ts | ||
package.json | ||
README.md | ||
styles.scss | ||
tsconfig.json |
<mwc-switch>
IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Material Design Guidelines: Switch
Installation
npm install @material/mwc-switch
NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.
Example Usage
Standard
<mwc-switch></mwc-switch>
Selected by default
<mwc-switch selected></mwc-switch>
Disabled
<mwc-switch disabled></mwc-switch>
<mwc-switch selected disabled></mwc-switch>
Styled
<style>
mwc-switch {
--mdc-switch-selected-handle-color: teal;
--mdc-switch-selected-track-color: lightseagreen;
/* ... additional states (hover/focus/pressed) + state-layer element */
--mdc-switch-unselected-handle-color: goldenrod;
--mdc-switch-unselected-track-color: palegoldenrod;
--mdc-switch-unselected-icon-color: black;
/* ... additional states (hover/focus/pressed) + state-layer element */
}
</style>
<mwc-switch></mwc-switch>
<mwc-switch selected></mwc-switch>
With Form Field
Most applications should use
<mwc-formfield>
to associate an interactive label with the switch.
<mwc-formfield label="Airplane mode">
<mwc-switch selected></mwc-switch>
</mwc-formfield>
<script type="module">
import '@material/mwc-switch';
import '@material/mwc-formfield';
</script>
API
Slots
None
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
selected |
boolean |
false |
If true, the switch is on. If false, the switch is off. |
disabled |
boolean |
false |
Indicates whether or not the switch is disabled. |
name |
string |
"" |
The form name of the switch. |
value |
string |
"on" |
The value of the switch to submit in a form when selected. |
Methods
None
Events
None
CSS Custom Properties
The switch may be customized using the theme()
mixin to emit custom
properties. The theme()
mixin can be used for simple and complex theming,
such as density.
@use '@material/mwc-switch';
mwc-switch {
@include mwc-switch.theme((
selected-handle-color: #00897b,
selected-track-color: #4db6ac,
));
}
mwc-switch.dense {
@include mwc-switch.theme(mwc-switch.density(-1));
}
mwc-switch {
--mdc-switch-selected-handle-color: #00897b;
--mdc-switch-selected-track-color: #4db6ac;
}
mwc-switch.dense {
--mdc-switch-state-layer-size: 44px;
}
View the MDC switch theme file for a list of theme keys and available built-in themes.
Global Custom Properties
This component exposes the following global theming custom properties.
Name | Description |
---|---|
--mdc-theme-primary |
Selected handle and ripple color. |
--mdc-theme-on-primary |
Selected and unselected icon colors. |