Updated: September 19, 2016

Select

Intro

The select control (also known as a dropdown list) allows users to select an item from a predefined list. The select control is composed of a select field and a list of options.

Do

  • Display the selected option in the select field.
  • Highlight the selected option when opening the option list.
  • Use short text in the option list, because the text can’t be wrapped.
  • Provide the value “(None)” in the option list, if you want to enable users to not select any option.
  • When providing the “(None)” option, make it the first option and select it by default.
  • When not providing a “(None)” option, define a default selected option.
  • Sort options alphabetically, numerically, or logically to help users find the right option quickly.

Don’t

  • Don’t provide a blank value to indicate that nothing is selected.
  • Don’t allow the control to auto-adjust the width based on the selection.