Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Switches

Switches toggle the state of a single item on or off
Material Design Guidelines: Switch

Examples

<mc-switch label="Label"></mc-switch>
<mc-switch checked label-right="Label"></mc-switch>
<mc-switch disabled label-right="Disabled"></mc-switch>
<mc-switch checked disabled label-right="Disabled"></mc-switch>
            

Switch labels

<mc-switch label="Label"></mc-switch>
<mc-switch checked label-right="Label right"></mc-switch>
<mc-switch class="min-width" label="Label min width"></mc-switch>
<mc-switch class="min-width" checked label-right="Label right min width"></mc-switch>
            

Switch with icons

<mc-switch label="No icons unchecked"></mc-switch>
<mc-switch checked label="No icons checked"></mc-switch>
<mc-switch checked checked-icon label="Checked icon"></mc-switch>
<mc-switch unchecked-icon label="Unchecked icon"></mc-switch>
<mc-switch icon label="Both icons"></mc-switch>
            

Style

CSS variables that allow you override default values
/* Optional variables for overriding */

--mc-switch-track-color: var(--mc-surface-container-highest);
--mc-switch-selected-track-color: var(--mc-primary);
--mc-switch-handle-color: var(--mc-outline);
--mc-switch-selected-handle-color: var(--mc-on-primary);
--mc-switch-icon-color: var(--mc-surface-container-highest);
--mc-switch-selected-icon-color: var(--mc-primary);
            
menu home apps Get started