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.
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:
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.
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.
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.