The Radio component is built using a native HTML <input type="radio"> element, which gives assistive technology the radio role, the checked state, and group membership without any additional ARIA. The input is wrapped in a FormControl that generates the IDs linking it to its <label>, description, and error elements. The <label> points to the input's id, so clicking the label selects the option.

Assistive text (description and error) renders in separate elements below the input, and their IDs are automatically linked to the input through the aria-describedby attribute so that assistive technology will properly announce them.

ARIA

table
Element	Attribute	Description
Fieldset	`aria-label`	Provides an accessible name for the RadioGroup when no visible legend is rendered.
Fieldset	`aria-labelledby`	References an external element that labels the RadioGroup.
Input	`aria-describedby`	References the description and error text elements. When both are present, both IDs are included, description first. Custom text may be set.
Input	`aria-label`	Provides an accessible name when no visible label is rendered.
Input	`aria-labelledby`	References the visible label element's ID. When a custom `ariaLabelledby` prop is also provided, both IDs are included so the input is named by all referenced elements.

Grouping

Radios that share a name form a native radio group: the browser allows only one to be checked at a time and handles arrow key navigation between them. Wrapping them in a RadioGroup renders the set inside a <fieldset> with the group label as its <legend> and supplies the shared name automatically, so assistive technology announces the group's question alongside each option.

A Radio rendered outside a group with no sibling sharing its name is a group of one—it can be checked but never unchecked.

Labels

We highly recommend adding visible labels with the label prop to prevent a lapse in communication. If a visible label is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the Radio to the user. Omitting a label will result in an error.

Keyboard

table
Key	Function
`Space`	Selects the focused Radio.
`Shift`+`Tab`	Moves focus to the previous focusable element.
`Tab`	Moves focus to the next focusable element.
`←→↑↓`	Moves focus to the previous or next Radio in the group and selects it.

Radio

Structure

ARIA

Grouping

Labels

Keyboard

On this page