@material/switch

What is @material/switch?

@material/switch is a Material Design implementation of a switch component. It provides a customizable and accessible switch that can be used to toggle between two states, such as on and off. The package is part of the Material Components for the web, which ensures a consistent look and feel across different platforms.

What are @material/switch's main functionalities?

Basic Switch

This is the most basic usage of the @material/switch component. It renders a switch that can be toggled between on and off states.

<mwc-switch></mwc-switch>

Disabled Switch

This example shows how to render a switch that is disabled and cannot be interacted with.

<mwc-switch disabled></mwc-switch>

Switch with Label

This example demonstrates how to use a switch with a label. The label is provided using the mwc-formfield component.

<mwc-formfield label="Toggle me"><mwc-switch></mwc-switch></mwc-formfield>

Switch with Event Listener

This example shows how to add an event listener to the switch to handle state changes.

document.querySelector('mwc-switch').addEventListener('change', (e) => { console.log('Switch state:', e.target.checked); });

Other packages similar to @material/switch

react-switch

react-switch is a lightweight switch component for React. It provides similar functionality to @material/switch but is designed specifically for React applications. It offers customization options for colors, sizes, and labels.

rc-switch

rc-switch is a React component that provides a switch UI element. It is highly customizable and supports various themes and styles. It is similar to @material/switch but is more focused on providing a flexible API for React developers.

vue-js-toggle-button

vue-js-toggle-button is a Vue.js component for creating toggle buttons. It offers similar functionality to @material/switch but is designed for Vue.js applications. It supports customization of colors, sizes, and labels.

README

Switches

The MDC Switch component is a spec-aligned switch component adhering to the Material Design Switch requirements. It works without JavaScript.

Design & API Documentation

• Material Design guidelines: Switches
• Demo

Installation

npm install --save @material/switch

Usage

HTML Structure

<div class="mdc-switch">
  <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
  <div class="mdc-switch__background">
    <div class="mdc-switch__knob"></div>
  </div>
</div>
<label for="basic-switch">off/on</label>

Disabled Switch

Users can add disabled directly to the input element or set the fieldset containing the switch to disabled to disable a switch. Disabled switches cannot be interacted with and have no visual interaction effect.

<div class="mdc-switch">
  <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" disabled />
  <div class="mdc-switch__background">
    <div class="mdc-switch__knob"></div>
  </div>
</div>
<label for="another-basic-switch">off/on</label>

CSS Classes

CSS Class	Description
mdc-switch	Mandatory, for the parent element
mdc-switch__native-control	Mandatory, for the input checkbox
mdc-switch__background	Mandatory, for the background element
mdc-switch__knob	Mandatory, for the knob element

Sass Mixins

The following mixins apply only to enabled switches in the on (checked) state. It is not currently possible to customize the color of a disabled or off (unchecked) switch.

Mixin	Description
mdc-switch-track-color($color)	Sets the track color
mdc-switch-knob-color($color)	Sets the knob color
mdc-switch-focus-indicator-color($color)	Sets the focus indicator color