Use Select to allow the selection of a value among a defined list (for example, choosing a country). With it, you can browse all list options when choosing. Opt to use it, if the number of options is higher than four.
Use Multi-select when it is possible to select numerous options in a list. This element resembles a normal selector, but when a choice is made, the latter moves itself into the container as a chip. The dropdown remains open to permit other choices being made. The selected values may be deleted by clicking on the “x” of the chip (see the Chip element)
Best practices
Select is collapsed by default.
Opt for checkboxes or radios buttons when you have 4 options or less and they must be visible.
Always organize the options logically (alphabetically, incrementally, by order of importance, etc.)
Use clear and concise labels
When possible, propose a preselected option or use a placeholder that encourages selection.
Placement
Dropdowns are typically used in forms, modals, or filter panels.
Appearance
Select dropdowns may have an input label above or to the left.
Behavior
Select dropdowns have many states: filled, hover, focus, disabled, expand and expand with selection.