thumb_up_alt
Was this page helpful? Please submit feedbackopens in new window so we can improve.
Radio Button
Radio buttons display a list of actions or options and allow selecting one item. All of the options display directly on the page, so radio buttons are best for shorter lists.
When to use radio buttons
Use radio buttons when a user must make a single selection from a list of two or more options. A 5-7 option maximum is recommended.
Radio buttons may also be appropriate for choices such as opting in or out of something or modifying search parameters (for example: toggling between boolean operators).
Other input options
To allow multi-select from a list of options, use checkboxes.
For longer lists of options, use a dropdown or select. The best choice will depend on context and whether you want to apply custom styles or not.
Guidelines for use of radio buttons
Radio buttons should always offer a default selection. Select the safest or most private option. If safety and security aren’t factors, select the most likely option.
Make sure that the list of options is comprehensive and each item is distinct. If it’s impossible to be comprehensive, add an “Other” option. List the items in a logical order — alphabetical, numerical, chronological, most commonly selected first, or something else clear.
Lay out lists vertically, with one choice per line. If limited space requires you to lay out the options horizontally, be sure to space the options so that it’s abundantly clear which button is paired with which label.
For option labels, use clear and concise language written in sentence case.
Be sure to include input validation as appropriate.