Select
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).
Component Variants
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.