Select
The select component allows users to make single or multiple selections from a pre-defined list of options.
Considerations about the select usage:
- A dialog element should allow the user to select one option from a list.
- If the list of options is short (4 or less), use checkboxes instead of the select component.
- The select component should always display a label different from any name in the option list.
- Use a pre-selected good default where possible.
- Use progressive disclosure between linked select components.
- If more than one option is applicable, use the multi-select variant.
| Variant | Description |
|---|---|
| Single | Allows the user to select one option from a list |
| Multiple | Allows the user to select multiple options from a list |
- Both select variants can be filterable.
- Use the filter when the number of items in the optionList is extremely long (± 15 elements).
- This list will be reduced to show only the matches as the user types.
- The value will change when the user types a string that matches an option from the list or pick one manually.
- When the search does not match any result, a "No matches found" message will be displayed.
- When labeled as optional, the select will display an option matching the placeholder to allow leaving it empty.
- When no optional label appears, the select is required.
- If the select was left empty, the required should display the error "This field can not be empty" when the select loses the focus.