Radio Group

When To Use

• When a user needs to select a single option from a list of mutually exclusive choices
• When the number of available options can comfortably fit in the available space
• When immediate feedback or visibility of all options is needed without requiring a dropdown
• When form design clarity benefits from a vertical or horizontal list of visible options

Examples

Basic

A basic radio group with default styling.

With Label

Radio group with form labels for better accessibility.

Disabled

Disabled radio group and individual radio items.

Custom

Radio group with custom styling and layout.

Props

RadioGroup

RadioGroupItem

Accessibility

The Radio Group component adheres to the WAI-ARIA Radio Group Pattern.

• The RadioGroup uses role="radiogroup" and each RadioGroupItem has role="radio".
• When a RadioGroupItem is checked, aria-checked is set to true.
• Radio items are properly labeled using either aria-label or associated form labels.
• Keyboard users can navigate between options using arrow keys and select options with Space.
• Focus management follows logical tab order and highlights the active option.