Select component allows users to choose one or more values from a list. It can optionally include search input, titles, buttons, grouping, and nesting.
The component is composed of a trigger button (explained in this guide) and the DropdownMenu.
Component consists of the following:
For the select trigger, you can use one of the following BaseTrigger types:
|BaseTrigger type||Appearance example|
|ButtonTrigger. Has two sizes: M and L.|
|LinkTrigger (looks like a link, but it's a button). Used it in two sizes: 14px text and 16px text.|
|LinkTrigger with the color of text (looks like a link, but it's a button). Used it in two sizes: 14px text and 16px text.|
|Size||ButtonTrigger||LinkTrigger||LinkTrigger with the color of text|
If the trigger has a maximum width, collapse long values into an
ellipsis. When hovering, show the tooltip with the full value name.
|State||ButtonTrigger||LinkTrigger||LinkTrigger with the color of text|
The select trigger can contain an icon, flag, or other addon before the text. The Badge should be placed to the right of the text. For all sizes, the margin between the badge and the text is 8px. The Dot should be placed in the upper right corner of the trigger.
|Element||ButtonTrigger||LinkTrigger||LinkTrigger with the color of text|
Read about the dropdown list, its content, and states in DropdownMenu.
Multiselect is a select type with the functionality to choose several items from a list. Items in such a list are represented by checkboxes.
If the list includes more than 10 values, add a search input. Otherwise, it will be difficult for the user to navigate among all values.
The search input should receive the focus state when the user opens the list, helping the user avoid extra clicks.
If you have more than three values, add the "Select all" option at the very beginning of the list. When everything is selected, change it to "Deselect all".
Specific cases for multiselect
In long lists (for example, in the list of countries), the values selected by the user should be pinned to the very top of the list when the user has closed/opened the select.
|User opens select and starts selecting the items.||User closes select.||User has reopened select, and the items they selected are pinned at the very top of the list. When unchecking these items, they remain in the same place.|
Displaying the selected values in the trigger
|If nothing is selected, write "Select" + the required value.|
|If everything is selected, write |
|If the user selects 1 or 2 values, show them in the trigger listing them with commas. If they don’t fit, collapse the text in |
|The select has a label. If more than 2 values are selected, add them to the "Label: N selected" construction.|
|The select doesn't have a label. If more than 2 values are selected, add them to the "N selected" construction.|
If the user searches for something and clicks "Select all" or "Deselect all", all found results will be selected or deselected. Other values, those that haven’t been searched for, don’t change their state.
For example, if the user has selected the "Gunship" and then searches for the "A" bands, then clicks "Select all", three more visible bands will be selected. As a result, four values will be marked as selected (three bands that start with "A" and the previously checked "Gunship").
Don’t show "Select all" or "Deselect all" at the time when the user has searched and got no results.
Limit on item selection
- Sometimes, user selection can be limited by the number of required items.
- In this case, once the user has selected the required number, all other items should receive the
- Inform the user that the choice is limited. This can be done, for example, by putting a Hint next to the input's label. Also, you can add a tooltip to the items in the
disabledstate that explains why they got this state.
We recommend hiding the "Select all" and "Deselect all" buttons for lists with limitations because, for such cases, the user cannot select or deselect all options due to limitations.