Preview
Installation
To import just the component styles, copy the following into your project’s styles.css file:
/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/switch/style.css');Usage
Start with a input element and add the switch class name:
<input class="switch" type="checkbox" />Variants
Default
Default switch styling.
<input class="switch" type="checkbox" />Icon Selected
Switch with icon selected styling.
<input class="switch icon-selected" type="checkbox" />Icon Unselected
Switch with icon unselected styling.
<input class="switch icon-selected icon-unselected" type="checkbox" />Design Tokens
| Token | Description | Default |
|---|---|---|
--md-sys-comp-switch-thumb-size | The size of the thumb | 16px |
--md-sys-comp-switch-track-width | The width of the track | 52px |
--md-sys-comp-switch-track-height | The height of the track | 32px |
--md-sys-comp-switch-border-width | The width of the border | 2px |