.. | ||
images | ||
src | ||
.npmignore | ||
package.json | ||
README.md | ||
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 Edge and IE11. See here for detailed instructions.
Example Usage
Standard
<mwc-switch></mwc-switch>
Checked by default
<mwc-switch checked></mwc-switch>
Disabled
<mwc-switch disabled></mwc-switch>
<mwc-switch checked disabled></mwc-switch>
Styled
<style>
mwc-switch {
--mdc-theme-secondary: red;
}
</style>
<mwc-switch checked></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 checked></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 |
---|---|---|---|
checked |
boolean |
false |
Whether or not the switch should be checked / activated. |
disabled |
boolean |
false |
Disables the input and sets the disabled styles. |
Methods
None
Events
Event Name | Target | Detail | Description |
---|---|---|---|
change |
mwc-switch |
{} |
Fired when the user modifies the switch checked state from an input device interaction. Note that, like native <input> , the change event is not fired when the checked property is set from JavaScript. |
CSS Custom Properties
Name | Default | Description |
---|---|---|
--mdc-theme-secondary |
#018786 |
Fill color of the thumb head and a lightened fill of the track. |
Also inherits styles from ripple