Skip to main content

Radio button

Overview​

Radio buttons are a type of selection control. There are three types of selection controls: 1. Checkboxes, 2. Radio buttons, 3. Switches.

  • Radio buttons: allow the selection of a single option from a set.
  • Checkboxes: allow the selection of multiple options from a set.
  • Switches: allow a selection to be turned on or off.

Radio buttons​

Radio buttons allow the user to select a single option from a set.

Use when​

  • The user needs to see all available options.
  • The user can only select one option.
  • Comparing between the list of options is helpful.

Don't use when​

  • There are a large number of options or the set could be collapsed. Use a select instead.
  • The user needs to select more than one option. Use checkboxes instead.
  • There is just selectable option (agreeing to Terms and Conditions, for example). Use a checkbox instead.
  • Screen real estate is limited. Use a select instead.

Best practices​

check_circle_outline

Use a logical order for the set of options: alphabetical, numeric, chronological, etc.

check_circle_outline

Clearly communicate the effect of selecting an option.

check_circle_outline

Radio buttons should start with a capital letter and use sentence case.

Components​

  • Use radio buttons to allow for the selection of a single option from a set.
  • Use checkboxes allow the selection of multiple options from a set.
  • Use a switch to turn an item on or off.
  • Use a button toggle to allow for the selection of a single option from a small set.
  • Use choice chips to allow for the selection of a single option from a small set, especially in mobile contexts.