RadioGroup

Role and semantics

RadioGroup renders a <fieldset> with role="radiogroup" through Base UI RadioGroup; the group is named by its <legend>. Each Radio has role="radio" and aria-checked. The help text and error are linked to the group with aria-describedby.

Keyboard

Key	Behaviour
Tab	Enters the group at the selected item, or the first item when none is selected. The next Tab leaves the group.
Arrow keys	Move focus to the next or previous item and select it.
Space	Selects the focused item.

Focus

The focused circle shows a 2 px color-focus-ring ring 2 px outside it (focus-visible). The group itself takes no focus.

Screen reader output

Example	Output
Entering the group	“Group label, radio group”, the help text, then “First option, radio button, selected, 1 of 3”
Required with an error	The name ends with “required”; the error text is read after the help text

Contrast

The color-border-strong border of an unselected circle has at least 3:1 contrast on the background. The error is reported in text, not by colour alone.

WCAG 2.2

Criterion	How RadioGroup meets it	What the product team does
1.3.1 Info and relationships	<fieldset>, <legend> and role="radiogroup".	Give every group a legend.
1.4.11 Non-text contrast	Border and dot at 3:1.	Do not thin the border with className.
2.1.1 Keyboard	Arrow keys and Space.	Keep the items in one group.
3.3.1 Error identification	An error in text and aria-invalid on the group.	Say in the error text what to do.
4.1.2 Name, role, value	role="radio" and aria-checked.	Give every item a visible label.