When to use a radio
You have a single option for a user to choose from in a list.
Behavior
Radios are an interactive element. Make sure that users have the option to change their mind and select another option.
Best practices
Align left
When a list is used vertically, align your content to the left to ensure readability.
Use labels
Normally, radios should be accompanied by a label. This gives users context into what they should select.
Test for accessibility
During the development stage, ensure that users can interact with radio buttons using the keyboard alone. This includes providing keyboard focus to the radio button and allowing users to toggle the button using the spacebar or the Enter key.
Visual indicators
Make sure that you are implementing all variants for the visual state of the radio button. This is important for users with low/no vision or color blindness. See the different states here.
Error handling
If there are validation errors related to the radio button (like a required selection that the user missed), provide clear error messages and instructions for users with screen readers.
Make sure it’s logical
Arrange options in a logical order that makes sense to users. For example, if presenting options in a sequence, arrange them in chronological or alphabetical order to facilitate scanning and selection.
Don’t overwhelm with options
Limit the number of radio button options to a manageable amount, ideally no more than 5-7 options. Too many can overwhelm users and make decision-making more difficult.