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