What is the best UI for multi-selecting from a list?

  • We have a web form and one of the fields is a multi-select list. Our options are:

    1. List of checkboxes
    2. Listview (select box but allowing multi-select)

    Both seem to be a bit ugly and unwieldy when the list contains more than 100 items.

    Is there any other UI solution that's better for such a case?

    There is another option: a list where each element is a label and bound to hidden checkbox. Clicking the label trips the checkbox and the label gets a "selected" style. With this arrangement you avoid the ugliness of the checkboxes and the unstability of the multiselect dropbox.

  • Bevan

    Bevan Correct answer

    10 years ago

    One alternative that I've seen in a number of places is to have two adjacent lists, one with available items and one with selected items.

    Here's an example from OpenFaces.org that I found with a quick google search:

    enter image description here

    I never cared for this type of UI too much mainly because it takes up so much real estate to implement. It does have it's advantages though in that it clearly shows two concise lists of what is selected and what is not as well as allowing a pretty simple albeit crude way of reordering selected items. Nevertheless it's an important method for multi-selection that shouldn't be left out when comparing the different methods out there.

    +1; the advantage of this solution is that you can add a filter for the left list, so the user can reduce the 100+ items, while the right list still shows all items that have been selected already.

    Also note that this pattern seems to have many names (ex. List Builder, Accumulator, Dual Lists,...)

    Programmers fancy this arrangement because it is featured in database column selection artifacts and the like, but IMO normal people don't know it.

    This seems like almost the only way to support certain complex scenarios (e.g. filtering list 1 without losing selection; or reordering list 2 without switching screens), but it's pretty clunky--I'd avoid it when it isn't needed.

    This version is one I've seen a lot and both liked and hated. The version mentioned in @seanevanking 's answer is a bit less clunky and seems quite functional: http://quasipartikel.at/multiselect/

    It's interesting to consider that a simple (boring) list of checkboxes requires just a single click to select an item. Whereas the above UI, while more fancy, requires a minimum of two clicks - so is less efficient in that sense.

    It depends on how many things are available to select - if you have a short list of things, a simple list of checkboxes is ideal. However, the OP was looking for solutions that work well with >100 items.

    I prefer to have this if multiple list i.e 100, the use of SHIFT in selecting consecutive 50 list is easy.

    is there a name for this type of user interface?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used