Radio: Allows users to select and deselect the radio button.
Label: Informs the user what the option is for the radio button.
Within the radio button
Ensure that there is at least 16px of horizontal spacing between the radio button and the label.
Radio buttons should be used when:
- When you want users to only select obe item from a list of options.
Radio buttons should not be used when:
When you want users to select multiple options. Using the checkbox component would be more appropriate.
List available options verically
It is recommended to list options vertically as horizontal listings may confuse users and make it difficult to tell which label belongs to which option.
Use logical labels
Ensure that labels for radio buttons and groups are clear to the user.
Ensure that options provided are organised in a meaningful way as this would help users to find the options easily.
Ensure there is enough spacing
Space options out and ensure there is adequate space for touch devices or mobile screens.
Radio button design tokens