Checkbox

A native checkbox restyled with appearance-none, with an SVG check that appears via peer-checked. All the semantics, none of the ARIA.

plain CSS — works everywhere

PreviewCode

<label class="flex cursor-pointer items-center gap-2.5 text-sm font-medium">
  <span class="relative inline-flex">
    <input
      type="checkbox"
      checked
      class="peer size-4 cursor-pointer appearance-none rounded-[4px] border border-input bg-background transition-colors checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    />
    <svg class="pointer-events-none opacity-0 absolute inset-0 m-auto size-3 text-primary-foreground scale-80 peer-checked:scale-100 peer-checked:opacity-100 transition-[opacity,scale]" 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"></path>
    </svg>
  </span>
  Accept terms and conditions
</label>

<label class="flex cursor-pointer items-center gap-2.5 text-sm font-medium">
  <span class="relative inline-flex">
    <input
      type="checkbox"
      class="peer size-4 cursor-pointer appearance-none rounded-[4px] border border-input bg-background transition-colors checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    />
    <svg class="pointer-events-none opacity-0 absolute inset-0 m-auto size-3 text-primary-foreground scale-80 peer-checked:scale-100 peer-checked:opacity-100 transition-[opacity,scale]" 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"></path>
    </svg>
  </span>
  Subscribe to the newsletter
</label>

How it works

appearance-none clears the native look; checked:bg-primary paints the box.
The check glyph is a sibling SVG faded and scaled in with peer-checked:opacity-100 + peer-checked:scale-100 — pointer-events-none keeps it from stealing clicks.
Wrapping everything in a <label> makes the text clickable with zero attributes. Keyboard, forms, indeterminate state — all still native.