Select
Last Updated on Sep 29, 2022
Select is used when multiple items are available to the user. Upon selection, a menu prompts the user for either single or multiple selection.
Design Principles
- Every select should have a label to be as clear and apparent as possible.
- Labels should be descriptive, not instructional, of the requested input. (example: “First Name” rather than “Type Name Here”
- Order your list of options in a way that will make the most sense. Most commonly, the menu should be sorted alphabetically, but could also be numeric or by most popular item(s).
- Have a default option selected or use “Choose…” as a placeholder option if there is no logical default option.
- Use help text when needed to provide additional context.
- Error text should show a solution by guiding a user what to do. Ambiguous text, for example, “Invalid Field”, can be frustrating and cause a negative experience to users.
- Try to limit the number of options in a select menu. If there are an exceptionally long list of options (more than 100 or so) consider using a different pattern, possibly an inline menu or dedicated modal.
Related Components