Refine By

Radio buttons

  • 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.

Style

 

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 ChangeWho Made the ChangeChange Details
May. 09 2017 7:18pm Initial content entry