💠 Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Usage

The Radio Group component consists of a set of radio buttons from which a user can make a single selection. Each radio button represents an option, and selecting one automatically deselects any other selected option within the same group.

This is ideal for presenting a list of mutually exclusive choices where the user must choose only one item.

When to use

• Exclusive choices: Use a Radio Group when you need users to select a single option from a list of two or more mutually exclusive choices, such as selecting a shipping method.
• Compact forms: Employ Radio Groups in forms where space is limited and you want to present all available options directly without requiring additional user interaction to reveal them.
• Clear options comparison: Utilize Radio Groups to allow users to compare all available options side-by-side to make an informed decision.
• Simplified interaction: Radio Groups are useful for simplifying the interaction by allowing a choice with a single click or tap, without the need for a dropdown menu.

Avoid using Radio Groups when multiple selections are allowed; checkboxes would be more appropriate in that scenario. Also, refrain from using them for large numbers of options where a dropdown might be less overwhelming and more user-friendly. It's important not to crowd too many radio buttons close together to prevent misclicks and to ensure ease of use on touch devices.

Examples

Default

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern (opens in a new tab) and uses roving tabindex (opens in a new tab) to manage focus movement among radio items.

Keyboard interactions