Radio
Interactive elements that allow users to select a single option from a list.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Ensure all the radio buttons in a group have the same
attribute. - Put the radio buttons inside a
, and give it a . - Ensure each radio button has an
associating it with its label. Be sure to associate additional text and error messages to its relevant radio input or fieldset. Reference the coded examples.
Keyboard controls
Keyboard behaviors treat radio buttons as a group. Tabbing into the group focuses the first radio. Tabbing a second time does not go to the second radio, it moves to the next focusable element after the radio group. Placing focus on a radio button automatically selects in. Use the following focus order to ensure radio groups are accessible and predictable:
- Ensure focus is placed on the currently selected option upon tabbing into the group.
- If all options are unselected, ensure focus is placed on the first radio button in the group.
- If the group is in an error state, focus is moved to the first radio button, and the whole fieldset is given the error (red) style.
| Key | Behavior |
|---|---|
| ↑↓→← | Moves the focus and selection to the next radio in the group and unselects the previously focused one. Focus moves in a circular rotation within the group, so progressing past the last option returns focus to the first in the group. |
| Tab | Moves to the next focusable element outside the radio group. |
| Shift + Tab | Moves to the previous focusable element outside the radio group. |
| Space | Selects the focused element if it’s not already selected. This allows the user to select an item without additional keyboard steps. |