Components
Radio
A Radio is an option the user can select. Use multiple Radio to show a list of options. Users can switch between the options, but can only select one.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
Make sure there is enough spacing around each radio button so that it is easy to select, including on touch devices.
Avoid placing radio buttons next to each other. This makes them harder to read and creates problems for users who need to zoom a webpage or app to see clearly.
Disabled states
Avoid disabled states if possible. They have low colour contrast, which can be problematic for some users. disabled cannot meet contrast requirements, because if the contrast were higher, users might think the element is active, try to select it, and not understand why nothing happens. NAV has a good explanation of why disabled states are problematic and what alternatives exist.
Keyboard navigation
Note that we use the arrow keys to select options in the Radio component, not the Tab key.
- ↑ or ← moves to the previous option
- ↓ or → moves to the next option
- Space moves to the first option in a group of radio buttons when the group does not have a preselected option
- Tab moves to the entire group of options