Radio Group
A group of radio buttons for selecting one option from several
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsradiogroup role on the container
The group container must have role="radiogroup".
radio role on each option
Each option must have role="radio" or use a native <input type="radio">.
aria-checked state
The selected state must be communicated via aria-checked="true/false".
Group label
The radiogroup must have an accessible name via aria-labelledby or aria-label.
Arrow key selection
Up/down (or left/right) arrow keys must move selection between radio options.
Use roving tabindex
Only the selected (or first) radio should be in the tab sequence (tabindex="0"); others should be tabindex="-1".
Wrap focus at group boundaries
Arrow key navigation should wrap from the last option back to the first (and vice versa).
Do not navigate between radios with Tab
Tab key should move focus between groups, not between individual radio options within a group.
Do not omit the group label
Without a group label, screen reader users cannot determine the question the radio group answers.
Additional checks
Connect RadioGroup with FormLabel
Pair RadioGroup with FormControl and FormLabel to provide a group label readable by screen readers.
Code sample
Implementation notes
- –MUI RadioGroup automatically handles roving tabindex and arrow key navigation.
- –The row prop enables horizontal layout — up/down arrow keys still work.