Toggle Switch

On/off toggle switch — sizes, colors, label positions, status text, and disabled states.

All toggles use DaisyUI's toggle class on a native <input type="checkbox">. Alpine is added only where reactive side-effects are needed — status text, dependent fields, or group logic. Simple on/off toggles with a label need no JavaScript at all.

1 — Default On / Off

Bare toggle, no label, no JS. Shows unchecked, checked, and indeterminate states — all driven by native HTML attributes.

Off (default)

Disabled off

Disabled on

<!-- Off -->
<input type="checkbox" class="toggle toggle-primary" />

<!-- On -->
<input type="checkbox" class="toggle toggle-primary" checked />

<!-- Disabled -->
<input type="checkbox" class="toggle" disabled />
<input type="checkbox" class="toggle" checked disabled />

2 — Sizes

Five size steps via DaisyUI size modifiers. Pair with matching text sizes (text-xs → text-base) when inline with a label.

<input type="checkbox" class="toggle toggle-primary toggle-xs" />
<input type="checkbox" class="toggle toggle-primary toggle-sm" />
<input type="checkbox" class="toggle toggle-primary toggle-md" /> <!-- default -->
<input type="checkbox" class="toggle toggle-primary toggle-lg" />
<input type="checkbox" class="toggle toggle-primary toggle-xl" />

3 — Color Variants

All six DaisyUI semantic color tokens. Use toggle-success for "enabled" contexts and toggle-error sparingly — only when the active state carries inherent risk.

Primary

Secondary

Accent

Success

Warning

Error

<input type="checkbox" class="toggle toggle-primary"   checked />
<input type="checkbox" class="toggle toggle-secondary" checked />
<input type="checkbox" class="toggle toggle-accent"    checked />
<input type="checkbox" class="toggle toggle-success"   checked />
<input type="checkbox" class="toggle toggle-warning"   checked />
<input type="checkbox" class="toggle toggle-error"     checked />

4 — Label Left / Right

Wrapping the input in a <label> makes the entire row clickable. Label goes left (default reading order) or right (toggle-leading layout). No JS needed.

Label left

Email notifications Push notifications Weekly digest Marketing emails

Label right

Dark mode Compact layout Show avatars Animate transitions

<!-- Label LEFT — toggle sits at the end of the row -->
<label for="notif" class="flex items-center justify-between gap-4
                           py-2 border-b border-base-200 cursor-pointer">
    <span class="text-sm">Email notifications</span>
    <input id="notif" type="checkbox"
           class="toggle toggle-sm toggle-primary shrink-0" checked />
</label>

<!-- Label RIGHT — toggle leads the row -->
<label for="dark" class="flex items-center gap-3
                          py-2 border-b border-base-200 cursor-pointer">
    <input id="dark" type="checkbox"
           class="toggle toggle-sm toggle-primary shrink-0" checked />
    <span class="text-sm">Dark mode</span>
</label>

5 — With Status Text

A reactive label reads the toggle's current value and updates inline. Alpine's x-model on a checkbox yields a boolean, so the status string is computed directly from it — no extra state variable.

Inline status

Status below

Maintenance mode

Badge status

<div x-data="{ on: true }">
    <label class="flex items-center gap-3 cursor-pointer">
        <input type="checkbox" class="toggle toggle-primary" x-model="on" />
        <span
            class="text-sm font-medium transition-colors"
            :class="on ? 'text-success' : 'text-base-content/40'"
            x-text="on ? 'Enabled' : 'Disabled'"
        ></span>
    </label>
</div>

6 — Settings Panel

Multiple toggles in a bordered card grouped by category — the most common real-world pattern. A parent toggle can enable/disable an entire group using Alpine's :disabled binding.

Notifications

Email Receive updates via email Push Browser push notifications SMS Text messages for critical alerts Weekly digest Summary email every Monday

Tracking

<!-- Parent toggle that disables children -->
<div x-data="{
    master: true,
    features: [
        { label: 'Analytics',     on: true  },
        { label: 'Heatmaps',      on: false },
        { label: 'Session replay', on: true  },
    ]
}">
    <!-- Master -->
    <label class="flex items-center justify-between gap-4 px-4 py-3 cursor-pointer">
        <span class="text-sm font-semibold">Tracking</span>
        <input type="checkbox" class="toggle toggle-sm toggle-success" x-model="master" />
    </label>

    <!-- Children -->
    <div :class="{ 'opacity-40': !master }">
        <template x-for="feat in features" :key="feat.label">
            <label class="flex items-center justify-between gap-4 px-4 py-3"
                   :class="master ? 'cursor-pointer' : 'cursor-not-allowed'">
                <span class="text-sm" x-text="feat.label"></span>
                <input type="checkbox" class="toggle toggle-sm toggle-primary"
                       x-model="feat.on" :disabled="!master" />
            </label>
        </template>
    </div>
</div>

7 — Loading State

Skeleton placeholder for a settings panel while data is being fetched. Matches the exact layout of Variant 6 so the transition is seamless.