Radio Card Group — Selectable Option Cards UI

When you need a user to pick exactly one option from a few — a pricing plan, a shipping speed, a payment method — large clickable cards convert far better than a cramped native dropdown, because each choice can show a title, price, description, and badge. This snippet builds that selectable-card pattern the right way: on top of real <input type="radio"> elements, so it stays keyboard-navigable, screen-reader friendly, and form-submittable with zero JavaScript required for the core behavior.

Real radios under the hood

Each card is a <label> wrapping a visually hidden <input type="radio"> and a styled .rcg-box. Because they're genuine radios sharing one name, the browser gives you single-selection enforcement, arrow-key navigation between options, focus management, and inclusion in form submission — all for free. The selected styling is driven entirely by the CSS :checked sibling selector (input:checked + .rcg-box), which highlights the border, tints the background, and fills the custom radio dot. This is the critical detail: re-implementing radio behavior with <div>s and JavaScript throws away accessibility that the native element provides automatically.

Selected state you can't miss

A chosen card gets a colored border, a soft background tint, a focus-ring-style shadow, and a filled circular indicator in the corner — four redundant signals so the selection is obvious at a glance and never relies on color alone. The :focus-visible selector adds a stronger ring when a card is reached by keyboard, so keyboard users always see where they are, while mouse users don't get a ring they didn't ask for.

A "most popular" flag without breaking layout

One card carries a "Most popular" badge pinned to its top edge — the standard nudge toward a recommended option. A small CSS rule (.rcg-flag ~ .rcg-tick) nudges the selection indicator down on flagged cards so the badge and the tick never collide, the kind of detail that separates a polished component from one that looks broken on the recommended plan.

JavaScript only for the nice-to-haves

The core selection works with no JavaScript at all — that's the point of building on native radios. The small script only powers conveniences: syncing the submit button's label to the chosen plan ("Continue with Pro") and showing a brief confirmation on submit. Strip the script entirely and the cards still select, navigate, and submit correctly, which is exactly the graceful-degradation property you want in a form control.

Keyboard and screen-reader behavior

The group is wrapped in role="radiogroup" with a label, and because the inputs are real radios, arrow keys move the selection, Tab moves into and out of the group as a single stop, and screen readers announce "Pro, radio button, 2 of 3, selected." None of that needs custom key handling — it's the native behavior preserved by not replacing the radios. This is why the radio-card pattern should always be built on inputs, not reconstructed from scratch.