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_6a7e9b5cad6c3" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad6c3" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5cad709" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad709" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-secondary peer-checked:border-secondary" 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_6a7e9b5cad745" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad745" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5cad77f" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad77f" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5cad7b3" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad7b3" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-info peer-checked:border-info" 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_6a7e9b5cad7e6" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad7e6" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-success peer-checked:border-success" 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_6a7e9b5cad819" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad819" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-warning peer-checked:border-warning" 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_6a7e9b5cad84d" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cad84d" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-error peer-checked:border-error" 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_6a7e9b5cc1ee8" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc1ee8" 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-5 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_6a7e9b5cc1f30" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc1f30" 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-5 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_6a7e9b5cc1f6e" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc1f6e" 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-5 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_6a7e9b5cc1fa8" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc1fa8" 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-5 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_6a7e9b5cc1fe1" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc1fe1" 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-5 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_6a7e9b5cc201a" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc201a" 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-5 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_6a7e9b5cc2053" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc2053" 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-5 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_6a7e9b5cc208b" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5cc208b" 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-5 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>

<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_6a7e9b5ce0a84" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce0a84" 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-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" 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_6a7e9b5ce0acf" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce0acf" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5ce0b0c" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce0b0c" 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-6 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" 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_6a7e9b5ce8c09" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce8c09" 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-5 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-primary" 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-1 text-[9px] 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-1 text-[9px] 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_6a7e9b5ce8c59" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce8c59" 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-5 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-primary" 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-1 text-[9px] 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-1 text-[9px] 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_6a7e9b5ce8ca2" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce8ca2" 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-6 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-success" 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-1 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-1 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_6a7e9b5ce8ce3" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce8ce3" 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-4 bg-base-300 border-base-content/10 peer-checked:bg-primary peer-checked:border-primary" 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_6a7e9b5ce8d20" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5ce8d20" 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-5 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_6a7e9b5d048ab" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="notify_6a7e9b5d048ab" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5d048fa" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="autosave_6a7e9b5d048fa" 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-5 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_6a7e9b5d0493e" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="beta_6a7e9b5d0493e" 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-5 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_6a7e9b5d0e521" class="block cursor-pointer"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="agree_6a7e9b5d0e521" 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-5 bg-base-300 border-base-content/10 peer-checked:bg-error peer-checked:border-error" 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_6a7e9b5d11e13" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5d11e13" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5d11e5d" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5d11e5d" 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-5 bg-base-300 border-base-content/10 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-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_6a7e9b5d11e9c" class="block cursor-not-allowed opacity-60"><span class="inline-flex items-center gap-3"><input type="checkbox" role="switch" id="toggle_6a7e9b5d11e9c" 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-5 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>