Switch

A control that allows the user to toggle between checked and not checked.

Switch components are used to allow users to toggle between two states, such as on and off.
 
<form class="space-y-4 max-w-sm w-full" data-shade="900">
    <div class="field">
        <div class="grid [grid-template-columns:1fr_auto]">
            <label for="sw1" class="text-title">Airplane mode</label>
            <label for="sw1" class="switch intent-primary">
                <input checked class="peer" type="checkbox" id="sw1" name="switch1"  />
                <span class="switch-thumb"></span>
            </label>
        </div>
        <span class="block text-caption text-sm">Switch components are used to allow users to toggle between two states, such as on and off.</span>
    </div>
</form>

Secondary

Switch components are used to allow users to toggle between two states, such as on and off.
 
<form class="space-y-4 max-w-sm w-full" data-shade="900">
    <div class="field">
        <div class="grid [grid-template-columns:1fr_auto]">
            <label for="sw1" class="text-title">Airplane mode</label>
            <label for="sw1" class="switch intent-secondary">
                <input checked class="peer" type="checkbox" id="sw1" name="switch1"  />
                <span class="switch-thumb"></span>
            </label>
        </div>
        <span class="block text-caption text-sm">Switch components are used to allow users to toggle between two states, such as on and off.</span>
    </div>
</form>

Accent

Switch components are used to allow users to toggle between two states, such as on and off.
 
<form class="space-y-4 max-w-sm w-full" data-shade="900">
    <div class="field">
        <div class="grid [grid-template-columns:1fr_auto]">
            <label for="sw1" class="text-title">Airplane mode</label>
            <label for="sw1" class="switch intent-accent">
                <input checked class="peer" type="checkbox" id="sw1" name="switch1"  />
                <span class="switch-thumb"></span>
            </label>
        </div>
        <span class="block text-caption text-sm">Switch components are used to allow users to toggle between two states, such as on and off.</span>
    </div>
</form>

Neutral

Switch components are used to allow users to toggle between two states, such as on and off.
 
<form class="space-y-4 max-w-sm w-full" data-shade="900">
    <div class="field">
        <div class="grid [grid-template-columns:1fr_auto]">
            <label for="sw4" class="text-title">Airplane mode</label>
           <label for="sw4" class="switch intent-neutral">
                <input checked class="peer" type="checkbox" id="sw4" name="switch1"  />
                <span class="switch-thumb intent-neutral"></span>
            </label>
        </div>
        <span class="block text-caption text-sm">Switch components are used to allow users to toggle between two states, such as on and off.</span>
    </div>
</form>

Disabled

Switch components are used to allow users to toggle between two states, such as on and off.
 
<form class="space-y-4 max-w-sm w-full" data-shade="900">
    <div class="field">
        <div class="grid [grid-template-columns:1fr_auto]">
            <label for="sw1" class="text-title">Airplane mode</label>
            <label for="sw1" class="switch intent-primary">
                <input disabled class="peer" type="checkbox" id="sw1" name="switch1"  />
                <span class="switch-thumb"></span>
            </label>
        </div>
        <span class="block text-caption text-sm">Switch components are used to allow users to toggle between two states, such as on and off.</span>
    </div>
</form>