Skip to content
On this page

Switch

Material Web catalog.**

Switches toggle the state of an item on or off.

Usage

Switches are similar to checkboxes, and can be unselected or selected.

html
<md-switch></md-switch>
<md-switch selected></md-switch>

Icons

Icons can be used to visually emphasize the switch's selected state. Switches can choose to display both icons or only selected icons.

html
<md-switch icons></md-switch>
<md-switch icons selected></md-switch>

<md-switch icons show-only-selected-icon></md-switch>
<md-switch icons show-only-selected-icon selected></md-switch>

Label

Associate a label with a switch using the <label> element.

html
<label>
  Wi-Fi
  <md-switch selected></md-switch>
</label>

<label for="switch">Bluetooth</label>
<md-switch id="switch"></md-switch>

Accessibility

Add an aria-label attribute to switches without labels or switches whose labels need to be more descriptive.

html
<md-switch aria-label="Lights"></md-switch>

<label>
  All
  <md-switch aria-label="All notifications"></md-switch>
</label>

Note: switches are not automatically labelled by <label> elements and always need an aria-label. See b/294081528.

Theming

Switches supports Material theming and can be customized in terms of color and shape.

Tokens

TokenDefault value
--md-switch-handle-color--md-sys-color-outline
--md-switch-handle-shape--md-sys-shape-corner-full
--md-switch-track-color--md-sys-color-surface-container-highest
--md-switch-track-shape--md-sys-shape-corner-full
--md-switch-selected-handle-color--md-sys-color-on-primary
--md-switch-selected-track-color--md-sys-color-primary

Example

html
<style>
  :root {
    /* System tokens */
    --md-sys-color-primary: #006a6a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-outline: #6f7979;
    --md-sys-color-surface-container-highest: #dde4e3;

    /* Component tokens */
    --md-switch-handle-shape: 0px;
    --md-switch-track-shape: 0px;
  }
</style>

<md-switch></md-switch>
<md-switch selected></md-switch>

API

MdSwitch <md-switch>

Properties

PropertyAttributeTypeDefaultDescription
selectedselectedbooleanfalsePuts the switch in the selected state and sets the form submission value to the value property.
iconsiconsbooleanfalseShows both the selected and deselected icons.
showOnlySelectedIconshow-only-selected-iconbooleanfalseShows only the selected icon, and not the deselected icon. If true, overrides the behavior of the icons property.
requiredrequiredbooleanfalseWhen true, require the switch to be selected when participating in form submission.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
valuevaluestring'on'The value associated with this switch on form submission. null is submitted when selected is false.
disabledbooleanundefined
namestringundefined

Methods

MethodParametersReturnsDescription
formResetCallbackNonevoid
formStateRestoreCallbackstatevoid

Events

EventTypeBubblesComposedDescription
inputInputEventNoNoFired whenever selected changes due to user interaction (bubbles and composed).
changeEventNoNoFired whenever selected changes due to user interaction (bubbles).
Switch has loaded