Alternative List Box UI

by September 10, 2008

List boxes can act as a set of radio buttons (allowing people to select exactly one choice from a set of mutually exclusive options) or as a set of checkboxes (allowing people to select any number of choices from a list of options).

List boxes can be configured to show more options than a drop-down menu while still taking up less screen real estate than a list of radio buttons or checkboxes. Despite these advantages, the dual nature of list boxes (mutually exclusive single selection or multiple selection) tends to cause problems for many people. As a result, list boxes are rarely used in Web forms.

Joe Mako recently pointed me to an alternative solution for selecting multiple options within a form: Alternate Select Multiple.

  • Doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.
  • Selected elements are always visible while unselected elements are always hidden (within a drop-down).
  • Unlike regular list box elements, those on Alternate Select Multiple are optionally sortable with drag and drop.
  • If a user does not have javascript, then the regular list box element is used instead (progressive enhancement).
  • Check out the demo.
  • Article about the advantages & disadvantages of this approach and others for multiple selection in Web forms.

alternative list box