No box — a circular ring indicator. On check, an SVG circle stroke draws around the full circumference via strokeDashoffset, then the green check mark springs into the center. Completely different shape from square checkboxes.
Goal: Create a "Circle" checkbox — no square box, only a circular ring indicator.
Visual behavior: A 28×28px circular indicator made of two SVG circles (r=11). First circle is a faint track ring. Second circle is the animated ring: stroke-dasharray and stroke-dashoffset animate from full-offset (hidden) to 0 (fully drawn) using a 420ms ease transition, starting at the top (rotate -90deg). After 280ms, a green check mark springs into the center from scale(0). On uncheck, check fades first, then ring retracts.
Technique: React useState. Two layered SVGs — one for the ring, one for the check. Pure strokeDashoffset + scale transitions. No keyframes, no library dependencies.
Accessibility: Hidden native <input type="checkbox">. Transitions skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.