Custom Radio Buttons — CSS Card Group Snippet

Custom radio buttons are a top-searched form snippet because the native radio is impossible to restyle reliably, and developers want the modern "selectable card" look used in pricing pages (the plan selector and radio card group), checkout flows, and onboarding. This snippet delivers exactly that: a group of plan cards where choosing one highlights the whole card, animates a dot into place, and — crucially — keeps a real `<input type="radio">` so single-selection, keyboard arrows, and screen-reader semantics all work natively. It is pure CSS, with no JavaScript managing which option is selected.

Why keep the native radio

Radio buttons have behavior you do not want to reimplement: a group sharing the same name allows only one selection, arrow keys move between options, Space/Enter selects, and the chosen value submits with the form. Building this from divs and JavaScript loses all of it and is a common accessibility failure — the same lesson as the custom checkbox. Here every option is a <label class="radio"> wrapping an <input type="radio" name="plan">. The browser enforces single-selection through the shared name, so there is no script to uncheck siblings — the radio group simply works.

The accessible hide pattern

The native radio is hidden with position: absolute; opacity: 0; width: 0; height: 0 rather than display: none. That keeps it focusable, keyboard-operable, and announced by assistive tech while letting CSS draw a custom indicator. The whole card is a label, so clicking anywhere on it selects that option. This is the same reliable pattern used for accessible custom checkboxes, applied to radios.

The animated dot with a springy bounce

The visible indicator is a .dot — a 20px circle with a border — containing an ::after pseudo-element that is the inner fill. By default the inner fill is transform: scale(0) (invisible). When the radio is checked, input:checked + .dot::after { transform: scale(1) } pops it to full size. The transition uses cubic-bezier(0.34, 1.56, 0.64, 1) — an overshoot easing curve whose value above 1 makes the dot scale slightly past 100% and settle back, producing a satisfying springy "bounce" as the option is selected. Animating only transform keeps it smooth on the GPU.

Highlighting the whole card with :has()

The standout feature is the card highlight. The modern CSS :has() relational selector lets a parent style itself based on a descendant's state: .radio:has(input:checked) matches the label only when the radio inside it is checked, applying a colored border and a soft tinted background (border-color: #6366f1; background: #eef2ff). This is the clean, script-free way to build selectable cards — before :has(), you needed JavaScript to add a class to the parent. :has() is supported in all current major browsers; for very old browsers you can fall back to highlighting just the dot and label text via the + sibling selector, which this snippet also uses.

Focus, hover, and selected states

The card responds to every interaction. Hovering or selecting transitions the border-color and background smoothly. Keyboard focus shows a ring via input:focus-visible + .dot { box-shadow: 0 0 0 3px rgba(99,102,241,0.35) } — using :focus-visible so the ring appears only during keyboard navigation, not on mouse clicks. The selected card combines the colored border, tinted background, filled dot, and (on keyboard) focus ring, so the chosen option is unmistakable at a glance.

The card content layout

Each card uses a flex row: the dot on the left, then an .info column with a bold plan name and a small description. This layout scales to any content — add a price badge, an icon, or a "Most popular" tag inside the info column. Because the dot is flex-shrink: 0, it never squashes when the text is long. The cards stack in a flex column with consistent spacing, and the whole group sits under a heading so the question being answered is clear.

Customizing the group

Change the accent color in four places — the checked dot fill (::after background), the checked dot border, the :has card border, and the focus-ring rgba(). To add a fourth option, copy a label and update its value and text; the shared name="plan" automatically includes it in the group. To make the dot bigger, scale the .dot and its ::after together. For a more subtle selection, soften the :has() background tint or remove the bounce by swapping the cubic-bezier for a plain ease. Because the markup is a simple repeating label, the pattern works for 2, 3, or 10 options.

Accessibility checklist

Give every radio in a group the same name so they form one group, and a unique value so the selection submits correctly. The wrapping <label> associates the text with the input, but you can also add for/id pairs for extra robustness. Consider wrapping the group in a <fieldset> with a <legend> ("Choose a plan") so screen readers announce the group's purpose. Keep the :focus-visible ring intact for keyboard users, and ensure the unchecked dot border has enough contrast against the card so empty options are visible. Because the native radios remain, arrow-key navigation, voice control, and screen readers all work without extra ARIA.