Four list UI components, one persistent confusion. Dropdown, combobox, multiselect, and listbox are not interchangeable. A dropdown hides options until triggered. A combobox adds a text input for filtering, single selection only. A multiselect does the same but returns multiple selections, displayed as chips. A listbox keeps all options visible by default, with scrolling for overflow. The dual listbox, the most overlooked of the group, lets users move items between two panels and is the only pattern that lets users review their full selection against the source list before committing. It is also, per the article, faster and more accessible than drag-and-drop.
The selection rule is mechanical: fewer than 5 options, use radio buttons or checkboxes. 200-plus options, use combobox or multiselect for speed. 7 or more options in any list component warrant a 'Select All' control. The article's standing principle is blunter: never hide frequently used options. Pre-select them, surface them as chips, or display them inline. Hiding common choices from users who need them constantly is a design failure, not a space-saving decision. Keyboard navigation with arrow keys is required for all list types, not optional.
The deeper argument here is about shared language across design and engineering. 'Dropdown' is too generic. Each component name carries a behavioral contract: combobox means text input, multiselect means bulk selection, listbox means always visible. When teams misname these components, they build the wrong thing and users face the wrong expectations. The article is worth reading in full for its decision matrix on when each pattern applies and its specific guidance on dual listbox, a component most teams skip without understanding what they are giving up.
[READ ORIGINAL →]