0.27.0 • Published 2 years ago

@material/mwc-switch v0.27.0

Weekly downloads
4,801
License
Apache-2.0
Repository
github
Last release
2 years ago

<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

NameTypeDefaultDescription
selectedbooleanfalseIf true, the switch is on. If false, the switch is off.
disabledbooleanfalseIndicates whether or not the switch is disabled.
namestring""The form name of the switch.
valuestring"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.

NameDescription
--mdc-theme-primarySelected handle and ripple color.
--mdc-theme-on-primarySelected and unselected icon colors.

Additional references

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.1

4 years ago

0.11.0

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago