Select screen display size:

Radio Buttons


A Radio button set shows the user a group of options from which he can only select one by clicking/tapping on it.

Use Cases

  • When the application is requesting a single choice from the user to select.
State
State
All Options
All Options
HTML

Do's & Dont's

Keep labels concise and logical
When creating a set of options for a radio button list, always try to be as concise as possible to keep each entry in one text line. Also, consider that the arrange is important to help the user quickly evaluate the options.

In terms of arrangement, it is advised to go:

  • From the most to the less likely to be selected.
  • From the simplest option to the most complex one.
  • From the least to the most risky option.
Defining Defaults, Null and Other options
Whenever the component is shown for the first time on a screen, one of the options will be needed to be shown by default. For this, be sure to always choose the safest, most private or most likely/convenient to the user, in order to reduce the impact of an unnoticed selection.

Also, depending on the scenario, it may be needed to have a null option listed (labeled usually as "None") and a wild card option (labeled usually as "Other(s)", "Not listed", "Not sure", etcetera), depending on the business needs.
Avoid having options overlapping each other
In some cases the options listed can overlap or be confusing. For example, if we are speaking about range selection, and we have an option listing "20-40" and other "40-50", the coincidence (number 40) can mislead the user.

Avoid this scenario, by clearly defining one selection from the other. Remember that under no circumstances is allowed to use Radio buttons with multiple selections.