HTML + CSSCheckboxes
Ring to fill checkbox
A round outline thickens inwards until it becomes a solid dot, and a small tick pops up inside.
Settings
16px
1x
Code
<label class="uv-ck2m"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Subscribe me</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
Where to use it
The ring closing in on itself feels soft and rounded, which fits friendly opt-ins: “Subscribe to the newsletter” at the end of a checkout, “Send me a reminder” on an event page or joining a waiting list. This round checkbox in CSS has no sharp corners at all, so it blends into playful, rounded interfaces.
Round checkboxes can be mistaken for radio buttons. Avoid mixing this one with radios in the same form, and keep the label clear so people know they can pick more than one.