- Contents:
Radio buttons:
- Allow options to be displayed together when only one is available
- Allow users to select a single option
Guidelines
- Use a radio button when the user has to select only one option out of many.
- Use a radio button to allow the user to compare options side by side.
- Ensure both the radio button and its label are clickable.
Click the prototype above to interact with it
- Radio buttons must be circular.
Accessibility
- Each radio button must have visible focus (may vary by browser) when reached by the keyboard.
- Label each radio button properly and be sure the label is announced by screen readers.
- Screen readers must announce the selected/deselected state of a radio button.
- Use fieldset and legend attributes to group related radio buttons if multiple sets are used on the same page.
- Use radio buttons only when only one option from a list can be selected.
- Users must be able to reach and select every radio button using only the keyboard.
Related elements
Related components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| May. 09 2017 7:18pm | Initial content entry |