Both states have visible content: unchecked shows a red × (reject), checked shows a green ✓ (approve). The × rotates away as the ✓ rotates in. The box shifts from red-tinted to green. A clear reject→approve narrative.
Goal: Create an "X to Check" checkbox where both states show visible content.
Visual behavior: A 28×28px box. Unchecked: red-tinted background, red × (two SVG lines crossing). Checked: green background, white ✓. Transition: the × rotates 45deg and scales to 0 as it exits; the ✓ counter-rotates from -45deg into place. The box background transitions from red-tinted to green. Both states are meaningful — this tells a reject→approve story.
Technique: React useState. Two SVGs absolutely stacked inside the box span, each toggled via transform (rotate + scale) + opacity transitions with staggered delays. 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.