mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00

Elizabeth Mitchell a8ce2ab427 docs: fix broken theming links

PiperOrigin-RevId: 564410908

2023-09-11 09:32:57 -07:00

4.8 KiB

Raw Permalink Blame History

Switch

This documentation is fully rendered on the Material Web catalog.

Switches toggle the state of an item on or off.

Design article
API Documentation (coming soon)
Source code

Usage

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

<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.

<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.

<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.

<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

Token	Default value
`--md-switch-handle-color`	`--md-sys-color-outline`
`--md-switch-handle-shape`	`9999px`
`--md-switch-track-color`	`--md-sys-color-surface-container-highest`
`--md-switch-track-shape`	`9999px`
`--md-switch-selected-handle-color`	`--md-sys-color-on-primary`
`--md-switch-selected-track-color`	`--md-sys-color-primary`

All tokens

Example

<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>

4.8 KiB Raw Permalink Blame History