Checkbox

<span data-slot="checkbox" class="relative inline-flex size-4 shrink-0">
  <input type="checkbox" {{ attributes.cn(
      "peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-input shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:checked:bg-primary",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive",
  ) }} />
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-primary-foreground peer-checked:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
</span>