Toggles

<x-toggle color="primary" label="primary" checked />
<x-toggle color="secondary" label="secondary" checked />
<x-toggle color="accent" label="accent" checked />
<x-toggle color="neutral" label="neutral" checked />
<x-toggle color="info" label="info" checked />
<x-toggle color="success" label="success" checked />
<x-toggle color="warning" label="warning" checked />
<x-toggle color="error" label="error" checked />

<label for="toggle_28ca23bafba75" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_28ca23bafba75" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="toggle_d7814d51b3f22" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_d7814d51b3f22" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-secondary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="toggle_325bd3a0f4584" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_325bd3a0f4584" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-accent peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="toggle_d0bbcb3d46cc8" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_d0bbcb3d46cc8" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-neutral peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="toggle_69e13d20ca70a" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_69e13d20ca70a" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-info peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="toggle_57d0677bbd028" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_57d0677bbd028" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-success peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="toggle_2b3cbc7938abe" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_2b3cbc7938abe" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-warning peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="toggle_54e571426fcee" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_54e571426fcee" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-error peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

<x-toggle appearance="soft" color="primary" label="primary" checked />
<x-toggle appearance="soft" color="secondary" label="secondary" checked />
<x-toggle appearance="soft" color="accent" label="accent" checked />
<x-toggle appearance="soft" color="neutral" label="neutral" checked />
<x-toggle appearance="soft" color="info" label="info" checked />
<x-toggle appearance="soft" color="success" label="success" checked />
<x-toggle appearance="soft" color="warning" label="warning" checked />
<x-toggle appearance="soft" color="error" label="error" checked />

<label for="toggle_50f9517a92ea7" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_50f9517a92ea7" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-primary bg-base-200 border-base-content/10 peer-checked:bg-primary/15 peer-checked:border-primary/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="toggle_53019ef86bb1c" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_53019ef86bb1c" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-secondary bg-base-200 border-base-content/10 peer-checked:bg-secondary/15 peer-checked:border-secondary/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="toggle_bb1cb7904e135" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_bb1cb7904e135" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-accent bg-base-200 border-base-content/10 peer-checked:bg-accent/15 peer-checked:border-accent/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="toggle_b3a4f03e71c11" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_b3a4f03e71c11" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-neutral bg-base-200 border-base-content/10 peer-checked:bg-neutral/15 peer-checked:border-neutral/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="toggle_f93f575734a06" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_f93f575734a06" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-info bg-base-200 border-base-content/10 peer-checked:bg-info/15 peer-checked:border-info/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="toggle_5da6b797449e2" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_5da6b797449e2" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-success bg-base-200 border-base-content/10 peer-checked:bg-success/15 peer-checked:border-success/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="toggle_18ebcd93a82f5" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_18ebcd93a82f5" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-warning bg-base-200 border-base-content/10 peer-checked:bg-warning/15 peer-checked:border-warning/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="toggle_9a4a73bf2e15c" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_9a4a73bf2e15c" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-error bg-base-200 border-base-content/10 peer-checked:bg-error/15 peer-checked:border-error/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

<div class="grid grid-cols-2 md:grid-cols-4 gap-sm">
    <x-toggle appearance="wire" color="primary" label="primary" checked />
    <x-toggle appearance="wire" color="neutral" label="neutral" checked />
    <x-toggle appearance="wire" color="accent" label="accent" checked />
    <x-toggle appearance="wire" color="neutral" label="off" />
</div>
<div data-tune="proto" class="grid grid-cols-2 md:grid-cols-4 gap-sm">
    <x-toggle appearance="wire" color="primary" label="primary (proto)" checked />
    <x-toggle appearance="wire" color="neutral" label="neutral (proto)" checked />
    <x-toggle appearance="wire" color="accent" label="accent (proto)" checked />
    <x-toggle appearance="wire" color="neutral" label="off (proto)" />
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-sm">
<label for="toggle_18920f41e69ad" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_18920f41e69ad" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="toggle_dfc487bda7f60" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_dfc487bda7f60" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-neutral peer-checked:border-neutral" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="toggle_2d85c07e7654d" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_2d85c07e7654d" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-accent peer-checked:border-accent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="toggle_d7e6810947367" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_d7e6810947367" class="peer sr-only">
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-neutral peer-checked:border-neutral" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">off</span></span></label>
</div>
<div data-tune="proto" class="grid grid-cols-2 md:grid-cols-4 gap-sm">
<label for="toggle_b094549513cff" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_b094549513cff" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-primary peer-checked:border-primary" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary (proto)</span></span></label>
<label for="toggle_4a9c15c5be524" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_4a9c15c5be524" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-neutral peer-checked:border-neutral" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral (proto)</span></span></label>
<label for="toggle_cb8dabee8b689" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_cb8dabee8b689" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-accent peer-checked:border-accent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent (proto)</span></span></label>
<label for="toggle_9fd1c91c4d61f" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_9fd1c91c4d61f" class="peer sr-only">
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-base-100 bg-transparent border-base-content/45 peer-checked:bg-neutral peer-checked:border-neutral" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-content border-[length:var(--border)] border-transparent shadow-none transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">off (proto)</span></span></label>
</div>

<x-toggle size="sm" label="size sm" checked />
<x-toggle size="md" label="size md (default)" checked />
<x-toggle size="lg" label="size lg" checked />

<label for="toggle_04a4bf5d98be6" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_04a4bf5d98be6" class="peer sr-only" checked>
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-xs)] text-base-content select-none leading-snug">size sm</span></span></label>
<label for="toggle_0874d4d255f06" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_0874d4d255f06" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">size md (default)</span></span></label>
<label for="toggle_3ca0243a8ea5d" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_3ca0243a8ea5d" class="peer sr-only" checked>
<span class="h-7 w-13 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.5rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-6 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-md)] text-base-content select-none leading-snug">size lg</span></span></label>

<x-toggle label="Default size, ON by default" stateLabel checked />
<x-toggle label="Default size, OFF by default" stateLabel />
<x-toggle size="lg" color="success" label="Large success, with state label" stateLabel checked />
<x-toggle size="sm" label="Small — silently ignored (track too narrow)" stateLabel checked />
<x-toggle appearance="soft" color="warning" label="Soft — silently ignored (insufficient contrast)" stateLabel checked />

<label for="toggle_bf8cda78659e5" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_bf8cda78659e5" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-state-on]:opacity-100 peer-checked:[&amp;_.xy-state-off]:opacity-0 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-state-on absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none left-[3.5px] text-[8px] opacity-0 text-primary-content">ON</span>
<span class="xy-state-off absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none right-0.5 text-[8px] opacity-100 text-base-content/60">OFF</span>
<span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Default size, ON by default</span></span></label>
<label for="toggle_821e00035ff1a" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_821e00035ff1a" class="peer sr-only">
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-state-on]:opacity-100 peer-checked:[&amp;_.xy-state-off]:opacity-0 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-state-on absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none left-[3.5px] text-[8px] opacity-0 text-primary-content">ON</span>
<span class="xy-state-off absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none right-0.5 text-[8px] opacity-100 text-base-content/60">OFF</span>
<span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Default size, OFF by default</span></span></label>
<label for="toggle_1a660596ebe49" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_1a660596ebe49" class="peer sr-only" checked>
<span class="h-7 w-13 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.5rem-2*var(--border))] peer-checked:[&amp;_.xy-state-on]:opacity-100 peer-checked:[&amp;_.xy-state-off]:opacity-0 bg-base-300 border-base-content/10 peer-checked:bg-success peer-checked:border-transparent" aria-hidden="true"><span class="xy-state-on absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none left-[4.5px] text-[10px] opacity-0 text-success-content">ON</span>
<span class="xy-state-off absolute top-1/2 -translate-y-1/2 font-bold tracking-tight leading-none uppercase transition-opacity pointer-events-none right-[3px] text-[10px] opacity-100 text-base-content/60">OFF</span>
<span class="xy-thumb size-6 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-md)] text-base-content select-none leading-snug">Large success, with state label</span></span></label>
<label for="toggle_5a9458bdb6fca" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_5a9458bdb6fca" class="peer sr-only" checked>
<span class="h-5 w-9 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-4 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-xs)] text-base-content select-none leading-snug">Small — silently ignored (track too narrow)</span></span></label>
<label for="toggle_470a860b0578a" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_470a860b0578a" class="peer sr-only" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-warning bg-base-200 border-base-content/10 peer-checked:bg-warning/15 peer-checked:border-warning/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Soft — silently ignored (insufficient contrast)</span></span></label>

<x-toggle name="notify" label="Receive push notifications" description="Delivered instantly to iOS / Android / Web." checked />
<x-toggle name="autosave" appearance="soft" color="success" label="Autosave" description="Saves your draft every 30 seconds." checked />
<x-toggle name="beta" appearance="soft" color="accent" label="Beta features" description="Try features that are still in development." />

<label for="notify_9e267711fe5f5" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="notify_9e267711fe5f5" class="peer sr-only" name="notify" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Receive push notifications</span></span></label>
<p class="mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    Delivered instantly to iOS / Android / Web.
</p><label for="autosave_b30910a73950b" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="autosave_b30910a73950b" class="peer sr-only" name="autosave" checked>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-success bg-base-200 border-base-content/10 peer-checked:bg-success/15 peer-checked:border-success/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Autosave</span></span></label>
<p class="mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    Saves your draft every 30 seconds.
</p><label for="beta_d1ad8cba9b3a9" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="beta_d1ad8cba9b3a9" class="peer sr-only" name="beta">
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-accent bg-base-200 border-base-content/10 peer-checked:bg-accent/15 peer-checked:border-accent/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Beta features</span></span></label>
<p class="mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    Try features that are still in development.
</p>

<x-toggle name="agree" label="Agree" description="Agreement is required to continue" error="This field is required" />

<label for="agree_0ca0e0ab70341" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="agree_0ca0e0ab70341" class="peer sr-only" name="agree">
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-error peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-error select-none leading-snug">Agree</span></span></label>
<p class="mt-1 text-[length:var(--text-field-xs)] text-error leading-snug">
    Agreement is required to continue
</p>

<x-toggle label="Disabled (off)" disabled />
<x-toggle label="Disabled (on)" checked disabled />
<x-toggle appearance="soft" color="info" label="Disabled (soft + on)" checked disabled />

<label for="toggle_f127c19a88950" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_f127c19a88950" class="peer sr-only" disabled>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (off)</span></span></label>
<label for="toggle_46acc32a6d4a8" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_46acc32a6d4a8" class="peer sr-only" checked disabled>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-transparent" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (on)</span></span></label>
<label for="toggle_e6bf54dd8d190" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_e6bf54dd8d190" class="peer sr-only" checked disabled>
<span class="h-6 w-11 relative inline-block shrink-0 border-[length:var(--border)] rounded-[var(--radius-field)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-thumb]:translate-x-[calc(1.25rem-2*var(--border))] peer-checked:[&amp;_.xy-thumb]:bg-info bg-base-200 border-base-content/10 peer-checked:bg-info/15 peer-checked:border-info/30" aria-hidden="true"><span class="xy-thumb size-5 absolute top-1/2 left-0.5 -translate-y-1/2 rounded-[var(--radius-field)] bg-base-100 border-[length:var(--border)] border-base-content/10 shadow-[var(--shadow-field)] transition-transform pointer-events-none"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (soft + on)</span></span></label>