Spring
No library Beginner
A radio group where selecting an option springs an indigo inner dot in with overshoot, adds a soft glow ring on the outer circle, and brightens the label. Mutual exclusivity via native radio semantics.
A radio group where selecting an option springs an indigo inner dot in with overshoot, adds a soft glow ring on the outer circle, and brightens the label. Mutual exclusivity via native radio semantics.
Goal: Create a "Radio" toggle animation.
Visual behavior: A group of radio options (typically 2–4). Each row has a 20×20px circle outline and a label. Off state: white/25% border, muted label. On state: indigo (#6366f1) border, a soft indigo glow ring (box-shadow), and an inner 8×8px indigo dot that springs in with overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)) on select and collapses with ease-in on deselect. The label brightens to near-white when selected. Only one option can be selected at a time.
Technique: React useState tracks the selected value. Each option renders a hidden native <input type="radio">. Inline styles drive the border-color, box-shadow, inner dot transform, and label color transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute for mutual exclusivity. Keyboard-navigable via native radio behavior. 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.