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

    0.25.1 • 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';
      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.

    Additional references

    Install

    npm i @material/mwc-switch

    DownloadsWeekly Downloads

    6,498

    Version

    0.25.1

    License

    Apache-2.0

    Unpacked Size

    94.4 kB

    Total Files

    27

    Last publish

    Collaborators

    • abhiomkar
    • azakus
    • bicknellr
    • material-admin
    • bwobrien
    • lynnjepsen
    • acdvorak
    • kfranqueiro
    • aprigogin
    • patrickrodee
    • bonniez
    • moog16
    • williamernest
    • aomarks
    • emarquez
    • allanchen
    • esgonzalez
    • asyncliz
    • candysonya
    • ssuarez
    • taylorv