Figma radio group components

Radio buttons carry a promise that checkboxes don't: pick one, and only one. That single constraint is why they show up at the most valuable moments in a product, like choosing a plan, a payment method, or a shipping option. Get the pattern wrong at those moments and it costs real money, which is a strange amount of pressure to put on a small circle.

The 2 components and 168 variants above cover those moments with both plain radio rows and full selectable cards, so the high-stakes screens in your product start from a solid pattern rather than a blank frame.

Radio buttons vs checkboxes

Use radio buttons when exactly one option from the set is valid, and checkboxes when users can select several. Nielsen Norman Group's guidelines cover the fine print.

Two more rules worth stealing: give a radio group a sensible default selection rather than leaving it empty, and once the list grows past five to seven options, switch to a select input so the choice doesn't swallow the page.

From plain rows to radio cards

The set includes six content types: a plain radio button row, simple icon rows, icon cards, avatar rows, payment method rows, and a checkbox-styled variant, each in two sizes with dedicated desktop and mobile versions. The mobile variants are taller with more generous touch targets, which saves you from the classic mistake of shipping desktop-density radio rows to a phone screen.

The card variants are the workhorses. A pricing tier picker or a saved-payment-method list reads far better as a row of selectable cards than as bare dots with labels, and here that pattern is a drop-in component instead of a custom build.

The card variants also solve a layout problem plain radios can't: they give each option room for a description, a price, or an icon without the group turning into a wall of text. When options need explaining, explain them inside the card rather than in a paragraph above the group that nobody connects to the right option.

Accessibility: one tab stop, arrow keys inside

A radio group behaves differently from most controls under a keyboard: the whole group is a single Tab stop, and arrow keys move the selection within it. That's the W3C radio group pattern, and it's why the focused states in this set exist for every row. Designing the focus ring now means nobody has to retrofit it when an accessibility audit lands later.

States and prototyping single-select

Every row and card covers default, hover, and focused states in both selected and unselected versions, with a visible focus ring for keyboard users. Selection state and interaction state are separate dimensions, so a selected card still has proper hover and focus treatments rather than freezing once it's chosen.

Prototyping the actual single-select behavior, where choosing one option deselects the rest, is the classic Figma puzzle. The clean approach is to make the whole group a component and swap between its variants with "change to" interactions, one variant per selected option, so state lives at the group level. Figma's interactive components guide covers the mechanics, and variables can handle the exotic cases.

In code, single-select is a solved problem. Untitled UI React radio groups are open source, built with Tailwind CSS and React Aria, with arrow-key navigation and group semantics handled for you, matching these Figma components one for one.