Radio button

RadioButton and RadioButtonGroup represent a set of mutually exclusive but related options. The user can only select one radio button at a time. When a user selects a new option, the previously selected option automatically clears. Therefore, radio buttons should therefore be used to display a choice between two or more options, as it’s impossible to clear a single radio button after selecting it.

Also known as: Radio, Radio group
View source code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Keyboard interactions

KeyFunction
Tab
  • Tab moves focus to the checked radio button in the radio button group.
  • If the user hasn't checked a radio button, Tab moves focus to the first radio button in the group.
Space
  • If the focused radio button isn't checked, Space changes the state to checked.
Up arrow / Down arrow / Left arrow / Right arrow
  • This action moves focus between the available radio button options, and simultaneously selects an option.