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