Switch — Sigta UI

Basic

Grayscale mode Weekly digest

Source

<div class="flex flex-col gap-4">
        <sigta:switch label="Grayscale mode" />
        <sigta:switch label="Weekly digest" checked />
    </div>

Disabled

Locked on Locked off

Source

<div class="flex flex-col gap-4">
        <sigta:switch label="Locked on" checked disabled />
        <sigta:switch label="Locked off" disabled />
    </div>

Without visible label

Source

<sigta:switch aria-label="Toggle paper grain" checked />

In a field

Notifications Weekly digest

Delivered every Friday, never more.

Source

<div class="max-w-sm">
        <sigta:field label="Notifications" description="Delivered every Friday, never more.">
            <sigta:switch label="Weekly digest" checked />
        </sigta:field>
    </div>