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 label-right="Label right" checked></mc-switch>
<mc-switch label="Label min width" class=min-width></mc-switch>
<mc-switch label-right="Label right min width" checked class=min-width></mc-switch>
Switch with icons
<mc-switch label="No icons unchecked"></mc-switch>
<mc-switch label="No icons checked" checked></mc-switch>
<mc-switch label="Checked icon" checked checked-icon></mc-switch>
<mc-switch label="Unchecked icon" unchecked-icon></mc-switch>
<mc-switch label="Both icons" icon></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);