Radio button

Definition: A radio button is an element that selects one option from a predefined set of options.

When to use

Use a radion button when users need:

  • select only one choice
  • side-by-side comparisons
  • binary choices like "Yes/No" or "Agree/Disagree
  • for filters or search criteria with a few predefined options

Anatomy

  1. Radio button
  2. Label

 

 

 

 

 

Variations

  1. Filled
  2. Stroke

 

 

 

 

 

States

 

  1. Unselected
  2. Selected

 

  • Enabled state
  • Focused state
  • Error state
  • Disabled state