Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<label class="ts-switch">
<input type="checkbox" checked />
Circuit Breaker
</label>
States
A switch can show it's currently disabled.
<label class="ts-switch">
<input type="checkbox" disabled />
Advanced Mode
</label>
Variations
A switch can show it's in an invalid state.
<label class="ts-switch is-negative">
<input type="checkbox" />
Spam Filter
</label>
A switch can have no extra spacing without label text.
<label class="ts-switch is-solo">
<input type="checkbox" />
</label>
A switch can have different sizes.
<label class="ts-switch is-small">
<input type="checkbox" checked />
Small
</label>
<label class="ts-switch">
<input type="checkbox" checked />
Default
</label>
<label class="ts-switch is-large">
<input type="checkbox" checked />
Large
</label>
Looking for similar components?