Checkbox
No library Beginner
A square checkbox that fills with indigo on check. The SVG checkmark springs in with an overshoot scale — a completely different shape from pill-style toggles. No dependencies.
A square checkbox that fills with indigo on check. The SVG checkmark springs in with an overshoot scale — a completely different shape from pill-style toggles. No dependencies.
Goal: Create a "Checkbox" toggle animation.
Visual behavior: A 28×28px square button (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border, animated with 200ms ease. Inside, an SVG checkmark (L-shaped path) that scales from 0.3 to 1 and fades in with a spring overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)) on check, and collapses back on uncheck.
Technique: React useState tracks checked state. Inline style on the SVG drives transform (scale) and opacity. The button's background and border-color transition on state change. role="checkbox" and aria-checked maintain accessibility.
Accessibility: role="checkbox", aria-checked, aria-label. Transform transition removed 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.