Users will often have to select from a list. This needs to be a quick process as large lists can be daunting and a user wants to make their decision in as few clicks as possible.
It can be tempting to just use a select input for lists! Don't do it. That creates a negative experience for the user by adding an extra click/ tap where it isn't needed.
Similarly, you may think it is easy to just list all options with a big array of radios. That again makes it a difficult choice for the user, like picking an item from a busy menu.
Follow these rules for choosing the correct component when adding lists to your form design:
Rule 1: Only two options
If there are only two options with a short answer, place them side by side and have their combined width match the width of the form column 480px.
Separate the options with a 16px gap.
In this scenario, the radio or checkbox option container has a max-width of 232px
Only use this for short answers such as yes or no. Longer answers that make more of a sentence should be placed in rows.
Space the options vertically by 12px.
Rule 2: Three to five options
When there are three to five options use either Radio Option or Checkbox Option components that span the full width of the form column 480px.
Space the options vertically by 12px.
Five options are the maximum amount to allow the user to make a quick selection and not overburden them with lots of choices that create a lot of scrolling.
Rule 3: Five options or less and only one may be chosen
For a list of five or fewer options when only one may be chosen, use the radio option component.
This provides the user with a large clickable/ tappable area to make a selection from.
For three or more and long answers space the radio option vertically by 12px.
Only one can be active at a time.
For two short answers space the radio options side by side. Each option has a width of 232px and a space between of 16px.
Rule 4: Five options or less and multiple may be chosen
For a list of five or fewer options when multiple may be chosen, use the Checkbox option component.
This provides the user with a large clickable/ tappable area to make multiple selections.
Space the checkbox option vertically by 12px.
The user can select as many of the five options they want.
Rule 5: Six options or more and only one can be chosen.
For a list of six or more options when only one may be chosen, use the 'Select Input' component.
Rule 6: Six options or more and multiple may be chosen.
For a list of six or more options when multiple may be chosen, use the 'Multi-Select' component.