Which Input Selector to Use?

Input selectors are pretty important and surprisingly easy to get wrong.

Sometimes we get UI questions from other teams who need to build interfaces, but lack expertise. So I put together this rule of thumb chart, which shows the right input for most situations.

To use it, ask “how many options are available to a user in this input?” That’s the x axis location. Then, “how many selections can they make?” That’s the y axis position. The color indicates which UI selector they should probably use.

For example, if there are 7 ice cream flavors and the user can have as many as they like, we use checkboxes. If there are 11 and they can only choose one, a dropdown. If there are 100 and they can have several, we usually turn to a typeahead search.

Generally, on the EVERFI platform team, we try to give users about 5 to 9 visible options at a time, but this chart has some arbitrary breakpoints, such as dropdowns handing off to typeahead search at 12 options.

Also, we almost always deal with the upper and lower bounds of this chart; users can usually select as many as they please or just one. So we may have made a mess of 3 selection x 8 options with checkboxes. Yeah, those should probably be done with a drag and drop, 2 panel list, or even html multiple select input.

Anyway, happy to hear feedback on this! I think such a chart will be basic knowledge in a few years.