Switch

A switch is used to toggle between two states.
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<label class="ts-switch">
    <input type="checkbox" checked />
    Circuit Breaker
</label>
States
Disabled

A switch can show it's currently disabled.

<label class="ts-switch">
    <input type="checkbox" disabled />
    Advanced Mode
</label>
Variations
Negative

A switch can show it's in an invalid state.

<label class="ts-switch is-negative">
    <input type="checkbox" />
    Spam Filter
</label>
Solo

A switch can have no extra spacing without label text.

<label class="ts-switch is-solo">
    <input type="checkbox" />
</label>
Sizes

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?
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI