Radio cards
A set of large option cards where choosing one automatically deselects the others.
See it
What it is
Radio cards are ordinary radio choices presented as roomy cards, so each option can carry a title, description, price, icon, or other comparison detail. The cards change the presentation, not the rule: the group still allows exactly one selected value.
Use them when a small set of consequential choices needs more context than a one-line label, such as a subscription plan, shipping speed, or workspace type. Native radio inputs with the same name preserve the expected keyboard behavior and form submission.
Gotcha: making the whole card clickable must not erase the actual control or its focus ring. Wrap each radio and its copy in a label, group them with fieldset and legend, and show selected, hover, focus, and disabled states distinctly. If people may choose several cards, these are checkbox cards instead.
Ask AI for it
Build a responsive radio-card group for choosing one pricing plan. Use a fieldset with a visible legend and native input type radio controls sharing one name, with each input and its plan details wrapped in a label so the full card is clickable. Lay out three cards with CSS Grid and style the selected card with :has(input:checked). Include plan name, price, a short description, a clear :focus-visible ring, and a disabled state. Preserve native arrow-key navigation and submit the selected radio value with the form.