
Introduction
A select allows users to select a single option from a list of at least four options, while the list of options are not inherently visible. Selects are commonly used to present a list of options that are not required to be displayed at all times, such as navigation menus or radio button groups.
- Selects are used in forms to give users the option to select from a list [e.g. selection of country]
- Select can also be used to filter or select an action, this results in an immediate effect on the current page [e.g. change sorting of a table; filter of a product list]
- By default, all form elements are mandatory; label them as optional only if they are indeed optional.
Usage
Selects are used to present a list of options in a space-efficient and user-friendly manner. They are particularly effective when there are a large number of options to choose from, as they allow users to quickly find the item they are looking for.

Use a select menu to display multiple options, allowing the user to choose only one. If the user can select multiple options, employ checkboxes instead.

If you have a limited number of options and sufficient space, avoid using a select and opt for radio buttons instead. Too many interactions can lead to frustration for users.

Use select when there are five options or more, and users can choose only one.

Don't display an empty state for selects on page load. If there's no default option, use a placeholder instead.

Use 1-3 words for options and keep to a single line of text.

Keep your option as short as possible and don't use long, multi-line texts.
Mobile Specs
On both Android and iOs, the flyout [link to flyout tbd] falls back to OS-native styles. On screen-widths smaller than 576px, the width of the select should be set to 100vw.


Also known as
Dropdown, Dropdown Menu, Select Menu, Dropdown Field
Related