Skip to content

Radio

A radio input allows selecting only one option from a list of choices. Radio is typically displayed in a group.  

 

radio-unchecked

Unchecked

radio-checked

Checked

Anatomy

  • The radio button can be used with or without a visible label. By default, the label is visible. The label also extends the radio button’s click area. 
  • Radio buttons radius is 100%. This is the same for the hover effect. 

radio-padding
Padding
radio-touch-area
Touch area

Principles

  • Use radios for making a single selection. If the user can select more than one option from a list, use checkboxes instead. 
  • In most cases, you would use radio buttons in a list of mutually exclusive options. In other words, you should group radio button choices under the same label. 
  • Radio buttons should have a value selected by default. The safest, most secure, and private option can be selected first. If these are not a factor, select the most likely option or convenient option. 
  • Do not preselect a value if: 
    • The user might not realize they’ve missed a question
    • The user might submit a wrong answer 

Accessibility

  • Standalone radios get their accessible name from the text value. 
  • Radio groups should have visible title labels. There may be some situations where you are unable to directly stack the radio inputs vertically (for example, within a table). 
  • Disabled radios should be removed from the tab order. If disabled radios need to remain in the tab order, use error messages explaining why the user cannot select them. 
  • Include error messages for required or invalid radio input fields. Display an error message if no value is selected when a form is submitted. 

Other best practices

  • Try to keep radio groups vertical. 
  • Avoid alphabetical orders. Localizing puts the options in different order 
  • Try to keep the list of options short. Use single select component for a large number of options.