Listboxes Vs. Dropdown Lists
Summary: Listboxes and dropdowns are compact UI controls that allow users to select options. Listboxes expose options right away and support multi-selection while dropdowns require a click to see options and support only single-selection. By Anna Kaley Anna Kaley on 2020-04-12 April 12, 2020 Many UI controls allow users to select options; they include checkboxes, radio buttons, toggle switches, steppers, listboxes, and dropdowns. In this article, I’ll define listboxes and dropdown lists, discuss when to use each element, and cases where either will suffice. Listboxes In their simplest form, a listbox contains three main parts: a container box, a list of items, and a label. Users can click on the items enclosed in the container box to select one or many from the list. A listbox may scroll, depending on how many items it contains and the viewable area. Sometimes, listboxes include checkboxes to clearly imply that multiselect functionality is available. More complex listboxes allow users to resize the container box, reorder the list of items, and make selections by moving items from one listbox to another. There are 4 variations of listboxes that can be classified according to selection type. Each of these listboxes can be scrollable or not. Single-select listbox: With this type of listbox, users can select only one item from a list of mutually exclusive options. Multiselect listbox: Users can select or deselect one or more items by holding down the Shift, Command, or Control key while clicking on items. Multiselect listbox with checkboxes: This type of listbox includes checkboxes to make multiple selection more obvious. Multiselect, dual listboxes: This type of listbox consists of two listboxes. The listbox on the left holds available options and the listbox on the right represents selected items. The Add button moves an item from the available list to the selected list and the Remove button moves a selected option back to available list, to deselect it. Users can also move options up and down to reorder elements in the list. Listboxes can remain static or scroll to reveal more items than their initial height exposes. They also support single-item or multi-item selection. A multiselect, dual listbox allows users to make selections by moving items from one listbox to another. Users can also reorder the options by moving them up and down in the list. Dropdown Lists In their simplest form, dropdown lists contain four main parts: a container box, a downward-facing arrow button, a list of items, and a label. Users can click on the down-arrow to display a list of mutually-exclusive items from which they can select only one. Like listboxes, dropdowns may scroll depending on how many items they contain when expanded. With dropdown lists, the selected option or default value remains visible in the container box, while the other list items appear only after clicking on the down-arrow. Selecting an item or clicking outside of the dropdown list will close it. Dropdown lists display a single default or selected value enclosed in a container box. On click of the down-arrow button, a list of options appears from which users can select only one. A dropdown list can remain static or scroll depending on how many items it contains. » Read More
Like to keep reading?
This article first appeared on nngroup.com. If you'd like to keep reading, follow the white rabbit.