Updated: September 15, 2016

Combo Box: Standard

Intro

The combo box with a single selection is a control which allows users to select one option from a long list of options.

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

Do

  • Use combo box with a single selection if you want users to select one option from a long list or users don’t have to see all options 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 without horizontal scrolling. Options that are too long 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 selection options is selected, show a blank input field.
  • If users need to indicate that all options apply, provide All as the first option.
  • If users need to indicate that none of the options applies.
  • Sort options alphabetically, numerically, or logically to help users find the right option quickly.
  • If you need to show a warning or error message related to this field, use the relevant state in the API properties.

Don’t

  • Don’t use a combo box if the user needs to select an option from a list of 2 options. In this case consider using the switch control or radio button control.
  • 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  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.