A radio group where each option is a full card row with a title and subtitle. Selecting a card reveals a green left-edge accent stripe via inset box-shadow, brightens the border and background, colors the subtitle in green, and springs a small dot indicator. Ideal for plan/tier selectors.
Goal: Create a "Card" radio group animation.
Visual behavior: A group of 3 radio options, each rendered as a full card row (240px wide, 12px vertical padding). Each card has a title (14px semibold) and a subtitle (11px). Unselected: faint border, dim text. Selected: green (#10b981) inset left-edge stripe via box-shadow (inset 3px 0 0 #10b981), brighter border, subtle green-tinted background, green subtitle, and a 16px ring indicator on the right with a 6px inner dot that springs in. Transition smoothly on all properties (200ms ease for backgrounds/colors, spring cubic-bezier for dot).
Technique: React useState tracks selected value. Each option is a <label> styled as a card. A hidden native <input type="radio"> provides semantics. Inline styles drive all transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name. Keyboard-navigable. Spring 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.