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


  1. Radio button
  2. Label







  1. Filled
  2. Stroke








  1. Unselected
  2. Selected


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