@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

Switches toggle the state of a single settings option on or off, and are mobile preferred.

Design & API Documentation

• Material Design guidelines: Switches
• Demo

Installation

npm install @material/switch

Basic Usage

HTML Structure

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

Variant

Disabled Switch

Users can add the disabled attribute directly to the <input> element or a parent <fieldset> element to disable a switch.

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

Style Customization

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.