Updated: September 20, 2016

Combo Box: Multi Selection

Intro

The multi selection combo box control is used to enable users to select several options from a long list. The options in the list have checkboxes that allow multi-selection.

The user can expose the list by clicking on the arrow and can type to filter the option list. The user can press the up and down keys to navigate between options and press the space or Enter keys to select an option.

When selecting multiple options, some option tokens can be displayed at the same time because the space is limited to the size of the input field (9). Swiping to the side scrolls horizontally to reveal a cropped token (10).

Do

  • Use a combo box with multi selection if you want users to select several options from a long list, or if users don’t have to see all options exposed on the screen all the time.
  • By default display a label, unless the combo box is next to another control that already has a label.
  • Keep the options as short as possible because the list uses single lines only without horizontal scrolling. Too-long options may be truncated and users may not be able to read them at all.
  • Define a default selection whenever possible.
  • If you need to express that none of the options are selected, show a blank input field.
  • If users need to indicate that all options apply, provide All as the first option.
  • Sort options alphabetically, numerically, or logically to help users find the right option quickly.

Don’t

  • Don’t use a combo box if users need to see all options exposed all the time, and there are up to 5 options. In this case consider using the checkbox control.
  • Don’t use a combo box if users need to manage the option list, for example adding a new option or deleting an option. In this case consider using the action select control.