Select to Proceed

A guide to designing and using selection controls

Linzi Berry
Jan 24 · 5 min read
To help break it down, here is a decision tree.

Single Selection

Segmented Control

A segmented control should be used to make a single selection out of 2–6 options. It is best used for iconography, small numbers or short words. It’s design consists of a horizontal container that houses equidistant options with one selected.

Iconography and Short Words vs Currency. Iconography by Meg

Radio Buttons

A radio button within a list item should be used for single selections of more than 6 options, a whole lotta content and/or unlimited vertical space. They are most commonly a circle outline that becomes filled upon selection at the start of the list item. iOS has created a new paradigm with the same meaning by putting a checkmark at the end and modern designs have adopted a highlighted stroke that goes around the list item to save horizontal space.

Android & Web vs iOS vs Alternate Pattern

Multi Selection

Choice Chips

Choice chips should be used to make multiple selections out of ~3–6 options. They are best used for one to two short words or numbers. Their design is similar to a small button with a shift in background color for ‘on’ and ‘off’, typically the minimum tap target height.

Short Options vs Long Options vs Wrapping & Shrinking

Checkmarks

Checkmarks in list items should be used for multi selections of more than 6 options, a whole lotta content and/or unlimited vertical space. They are denoted by a square outline that becomes filled with a checkmark upon selection at the start of the list item.

Checkmark in a List Item

All Together Now!

It’s easy to get caught up in the design of a particular component, so I find it best to start with the big picture — the form. Through this we can make thoughtful decisions on which option is best for coherency, differentiation and hierarchy.

Segmented Control & Choice Chips

The background is the biggest differentiator between segmented controls and toggle buttons. A connected background helps the user understand they must choose one, while a separated background indicates they can choose many.

Similar Treatments vs Dissimilar Treatments
Dissimilar Treatments vs Similar Treatments

Radio Buttons & Checkmarks

With so many radio button options to choose from, I find it best to design radio buttons and checkmarks next to each other. The iOS end radio button checkmark and highlighted list item are great alone, but when paired with a checkmark — the radio button wins for consistent placement. It’s confusing to have two checkmarks, you know what I mean?

Android & Web vs iOS vs Alternate Pattern
Image in the End vs Start Position

Last Thoughts

Another great single selection control is a picker. It can be used for when you have many short words or phrases and limited vertical space. It is recommended to place only text in a tumbler, therefore it’s use is very specialized and they are complex to customize in both Android and iOS.


Tap to Dismiss

Sweating the details so you don’t have to

Linzi Berry

Written by

Design Systems Lead at an SF-based consumer tech company

Tap to Dismiss

Sweating the details so you don’t have to