Four list components dominate UI design: dropdown, combobox, multiselect, and listbox. They are not interchangeable. A dropdown hides its list until triggered. A combobox combines a text input with a dropdown for single-option filtering. A multiselect does the same but returns multiple selections, displayed as chips. A listbox exposes all options by default, with scrolling. The dual listbox, also called a transfer list, lets users move items between two visible lists and is the only pattern that lets users review their full selection against the source list before committing.
The selection threshold matters. Under 5 options: use radio buttons or checkboxes. Over 200 options, like country selection: use combobox or multiselect for speed. The article's most actionable rule is this: never hide frequently used options. Pre-select them, or surface them as chips or buttons before the full list loads. For lists with 7 or more items, add Select All and Clear All controls. All patterns require keyboard navigation, arrow keys included, for accessibility. The piece also flags a persistent mistake: non-interactive elements styled as buttons, and interactive elements that look like static labels.
The article's real argument is about shared vocabulary across design, engineering, and product teams. Calling everything a dropdown creates misaligned expectations before a single line of code is written. The dual listbox section alone is worth reading in full: it makes a specific, evidence-backed case that the pattern is faster, more accurate, and more accessible than drag-and-drop for bulk selection tasks like role assignment. That claim deserves scrutiny, and the original provides the context to evaluate it.
[READ ORIGINAL →]