Last Updated on Dec 15, 2022
Selects are used to provide input to the system from a predetermined list of options. When active, a menu prompts the user for either single or multiple selection(s).

Design Principles

  • Use a default value for the select, such as "Choose…" or "Chose [name-of-data]...," to prompt the user to make a selection. This will prevent the user from accidentally submitting the form or task without making a selection.
  • Selects can be either single or multi-select. If they are multi-select, options will have a checkbox.
  • If the list of options is very long (25+ items) consider using a search field in the menu to make it easier to find their selection.
  • Selects use the Form Label component to denote required status, helper and error text, add a chip, and an info icon. Form Labels are most commonly on top of inputs, but can be used horizontally too. See our documentation on Form Label for more information. Selects don’t require a form label. In some cases, they can be omitted for space. This should be a fairly rare use case.
  • Selects can be used inside of tables. See our documentation on Editable Table Cells for more information.
  • Selects can have an active state, disabled state, and an error state.
  • We have addons for selects to a select, or a button to the immediate left or right of an input. These provide helpful microinteractions to make inputs more useful for a variety of different UI needs.

Do's and Don'ts

Write a clear and concise label to describe the purpose of and/or data for each input field.
Use placeholder text to give users a starting point or to show the expected format of the data.
Use the correct background color for inputs. The alt background option should be used on all non-white backgrounds.
Don’t add an icon to a select. Selects and menus don’t have an option for adding an icon.
Don’t match the background of input to the background of the page. Use the alt background to provide proper contrast.