The Drop Down List

Bootstrap drop down example

Drop down lists are commonly used when there are many options to choose from in a single input field. Drop down lists function like radio buttons but take up less space. Many designers group inputs under a parent selection to reduce clutter and improve the visual appeal of a digital experience. However, this implementation is often lazy and problematic.

Drop down lists should only be used when there are between 6 and 20 choices. Common misuse of this pattern occurs when there are only 2 choices or when there are hundreds of options. If there are only a few choices, radio buttons work well. When there are more than 20 choices, like in the case of country selection, text auto-complete should be used.

Drop down lists are loosing popularity because users are more willing to scroll than ever before and because of the increasing number of touch displays. Tap events are troublesome because it requires an additional touch to pick an input.

Drop down lists should be used when there isn’t a need to show every option at once and to conserve space.