Design Components

Radio Buttons

Design Components

Radio Buttons

Radio buttons are used when selecting a single option from a list of options in the context of a form.

Best practices 

  • Ideally ensure your group of radio buttons has between 2 and 7 options. If the range of options is greater then 7, consider using a select control instead.
  • Sort options logically. For example, place the simplest or safest option first and add subsequent options following the same criteria.
  • Don't nest other options within a radio button group. Instead reveal related fields after the radio button group based on the selected option.
  • Include a "None" option in cases where users may need to unselect a previous choice.
  • Use concise labels, adding a description if further explanation is necessary

Anatomy

Radio buttons (1)

1. Checkbox group label

2. Selected option

3. Unselected option

 

Specifications


View Developer Docs

 

HeroLogo
 
© Copyright 2019 BigCommerce
 
 
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us