@material/mwc-switch
TypeScript icon, indicating that this package has built-in type declarations

0.27.0 • Public • Published

<mwc-switch> Published on npm

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

Demo

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/mwc-switch.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</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';

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.

Additional references

Dependencies (5)

Dev Dependencies (3)

Package Sidebar

Install

npm i @material/mwc-switch

Weekly Downloads

4,218

Version

0.27.0

License

Apache-2.0

Unpacked Size

95.2 kB

Total Files

27

Last publish

Collaborators

  • yefim
  • abhiomkar
  • azakus
  • bicknellr
  • material-admin
  • aprigogin
  • patrickrodee
  • aomarks
  • emarquez
  • esgonzalez
  • asyncliz
  • candysonya
  • ssuarez
  • taylorv