Checkboxes

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

<label for="checkbox_6a7e9b6f95be7" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95be7" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="checkbox_6a7e9b6f95c36" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95c36" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-secondary/10 border-transparent text-secondary/80 peer-checked:bg-secondary/15 peer-checked:border-secondary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="checkbox_6a7e9b6f95c76" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95c76" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-accent/10 border-transparent text-accent/80 peer-checked:bg-accent/15 peer-checked:border-accent/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="checkbox_6a7e9b6f95cb2" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95cb2" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-content/10 border-transparent text-base-content/80 peer-checked:bg-base-content/15 peer-checked:border-base-content/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="checkbox_6a7e9b6f95cee" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95cee" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-info/10 border-transparent text-info/80 peer-checked:bg-info/15 peer-checked:border-info/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="checkbox_6a7e9b6f95d29" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95d29" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-success/10 border-transparent text-success/80 peer-checked:bg-success/15 peer-checked:border-success/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="checkbox_6a7e9b6f95d63" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95d63" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-warning/10 border-transparent text-warning/80 peer-checked:bg-warning/15 peer-checked:border-warning/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="checkbox_6a7e9b6f95d9f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6f95d9f" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-error/10 border-transparent text-error/80 peer-checked:bg-error/15 peer-checked:border-error/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

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

<label for="checkbox_6a7e9b6fb8764" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb8764" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="checkbox_6a7e9b6fb87ac" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb87ac" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-secondary/10 border-transparent text-secondary/80 peer-checked:bg-secondary/15 peer-checked:border-secondary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="checkbox_6a7e9b6fb87ed" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb87ed" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-accent/10 border-transparent text-accent/80 peer-checked:bg-accent/15 peer-checked:border-accent/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="checkbox_6a7e9b6fb8829" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb8829" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-content/10 border-transparent text-base-content/80 peer-checked:bg-base-content/15 peer-checked:border-base-content/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="checkbox_6a7e9b6fb8864" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb8864" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-info/10 border-transparent text-info/80 peer-checked:bg-info/15 peer-checked:border-info/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="checkbox_6a7e9b6fb889e" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb889e" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-success/10 border-transparent text-success/80 peer-checked:bg-success/15 peer-checked:border-success/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="checkbox_6a7e9b6fb88d9" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb88d9" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-warning/10 border-transparent text-warning/80 peer-checked:bg-warning/15 peer-checked:border-warning/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="checkbox_6a7e9b6fb8913" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fb8913" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-error/10 border-transparent text-error/80 peer-checked:bg-error/15 peer-checked:border-error/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

<x-checkbox appearance="base-200" color="primary" label="base-200 appearance on a base-200 surface" checked />
<x-checkbox appearance="base-200" color="success" label="success" />
<x-checkbox appearance="base-200" color="neutral" label="neutral" indeterminate />

<label for="checkbox_6a7e9b6fdaa1c" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fdaa1c" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-200 border-base-content/15 text-primary/80 peer-checked:border-primary/70"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">base-200 appearance on a base-200 surface</span></span></label>
<label for="checkbox_6a7e9b6fdaa65" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fdaa65" class="peer sr-only">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-200 border-base-content/15 text-success/80 peer-checked:border-success/70"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="checkbox_6a7e9b6fdaaa3" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fdaaa3" class="peer sr-only" x-data="" x-init="$el.indeterminate = true">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-200 border-base-content/15 text-base-content/80 peer-checked:border-base-content/70"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>

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

<label for="checkbox_6a7e9b6fe839d" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fe839d" class="peer sr-only" checked>
<span class="size-3.5 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-2.5 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-2.5 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-xs)] text-base-content select-none leading-snug">size sm</span></span></label>
<label for="checkbox_6a7e9b6fe83e1" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fe83e1" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">size md (default)</span></span></label>
<label for="checkbox_6a7e9b6fe841a" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b6fe841a" class="peer sr-only" checked>
<span class="size-5 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3.5 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3.5 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-md)] text-base-content select-none leading-snug">size lg</span></span></label>

<x-checkbox label="Unchecked" />
<x-checkbox label="Checked" checked />
<x-checkbox label="Indeterminate (partially selected)" indeterminate />

<label for="checkbox_6a7e9b700121c" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b700121c" class="peer sr-only">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Unchecked</span></span></label>
<label for="checkbox_6a7e9b7001262" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b7001262" class="peer sr-only" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Checked</span></span></label>
<label for="checkbox_6a7e9b70012a1" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b70012a1" class="peer sr-only" x-data="" x-init="$el.indeterminate = true">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Indeterminate (partially selected)</span></span></label>

<x-checkbox name="news" label="Receive the newsletter" description="1-2 times a month. You can unsubscribe anytime." checked />
<x-checkbox name="terms" appearance="soft" color="success" label="I agree to the terms of service" description="Please read them before continuing." required />
<x-checkbox name="marketing" appearance="base-100" color="accent" label="Marketing emails" description="Product news and campaign information." checked />

<label for="news_6a7e9b700e968" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="news_6a7e9b700e968" class="peer sr-only" name="news" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Receive the newsletter</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    1-2 times a month. You can unsubscribe anytime.
</p><label for="terms_6a7e9b700e9ac" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="terms_6a7e9b700e9ac" class="peer sr-only" name="terms" required="required">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-success/10 border-transparent text-success/80 peer-checked:bg-success/15 peer-checked:border-success/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">I agree to the terms of service</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    Please read them before continuing.
</p><label for="marketing_6a7e9b700e9ea" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="marketing_6a7e9b700e9ea" class="peer sr-only" name="marketing" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-100 border-base-content/15 text-accent/80 peer-checked:border-accent/70"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Marketing emails</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
    Product news and campaign information.
</p>

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

<label for="agree_6a7e9b701d327" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="agree_6a7e9b701d327" class="peer sr-only" name="agree">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-error/10 border-transparent text-error/80 peer-checked:bg-error/15 peer-checked:border-error/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-error select-none leading-snug">Please agree</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-error leading-snug">
    Agreement is required to continue
</p>

<x-checkbox label="Disabled (unchecked)" disabled />
<x-checkbox label="Disabled (checked)" checked disabled />
<x-checkbox appearance="soft" color="info" label="Disabled (soft + checked)" checked disabled />
<x-checkbox appearance="base-100" color="primary" label="Disabled (base-100 + checked)" checked disabled />

<label for="checkbox_6a7e9b702278f" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b702278f" class="peer sr-only" disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (unchecked)</span></span></label>
<label for="checkbox_6a7e9b70227d5" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b70227d5" class="peer sr-only" checked disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (checked)</span></span></label>
<label for="checkbox_6a7e9b7022814" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b7022814" class="peer sr-only" checked disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-info/10 border-transparent text-info/80 peer-checked:bg-info/15 peer-checked:border-info/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (soft + checked)</span></span></label>
<label for="checkbox_6a7e9b7022851" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="checkbox" id="checkbox_6a7e9b7022851" class="peer sr-only" checked disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-base-100 border-base-content/15 text-primary/80 peer-checked:border-primary/70"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">Disabled (base-100 + checked)</span></span></label>

<fieldset class="flex flex-col gap-sm">
    <x-checkbox name="fruits[]" value="apple" label="Apple" />
    <x-checkbox name="fruits[]" value="banana" label="Banana" />
    <x-checkbox name="fruits[]" value="cherry" label="Cherry" />
    <x-checkbox name="fruits[]" value="durian" label="Durian" />
</fieldset>

<fieldset class="flex flex-col gap-sm">
<label for="fruits___6a7e9b703449e" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="fruits___6a7e9b703449e" class="peer sr-only" name="fruits[]" value="apple">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Apple</span></span></label>
<label for="fruits___6a7e9b70344e7" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="fruits___6a7e9b70344e7" class="peer sr-only" name="fruits[]" value="banana">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Banana</span></span></label>
<label for="fruits___6a7e9b7034524" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="fruits___6a7e9b7034524" class="peer sr-only" name="fruits[]" value="cherry">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Cherry</span></span></label>
<label for="fruits___6a7e9b7034560" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="checkbox" id="fruits___6a7e9b7034560" class="peer sr-only" name="fruits[]" value="durian">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--size-selector)] transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-check]:opacity-100 peer-indeterminate:[&amp;_.xy-dash]:opacity-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><svg class="xy-check size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
<svg class="xy-dash size-3 absolute opacity-0 transition-opacity pointer-events-none" fill="none" stroke="currentcolor" stroke-width="3" viewbox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M6 12h12"></path></svg></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Durian</span></span></label>
</fieldset>