Select / Multiselect

Description ​

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 composition ​

Component consists of the following:

• Select.Trigger
• Select.Menu
• Select.InputSearch
• Select.Option
• Select.OptionHint
• Select.OptionTitle
• Select.OptionCheckbox

Trigger ​

For the select trigger, you can use one of the following BaseTrigger types:

Trigger button 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.

Trigger sizes ​

Trigger button sizes

Size	ButtonTrigger	LinkTrigger	LinkTrigger with the color of text
M
L

Maximum width ​

If the trigger has a maximum width, collapse long values into an ellipsis. When hovering, show the tooltip with the full value name.

Trigger states ​

Trigger button states

State	ButtonTrigger	LinkTrigger	LinkTrigger with the color of text
Default
Hover
Active
Placeholder
Loading
Valid
Invalid
Disabled

When the value of the trigger isn't known while the select is loading, center the Spin within it.

Trigger button loading state for the unknown value in the trigger

State	ButtonTrigger	LinkTrigger	LinkTrigger with the color of text
Loading

Trigger content ​

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.

Content types trigger button can have

Element	ButtonTrigger	LinkTrigger	LinkTrigger with the color of text
Flag
Icon
Avatar
Badge

DropdownMenu ​

Read about the dropdown list, its content, and states in DropdownMenu.

Multiselect ​

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.

Select all ​

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.

Specific cases for multiselect

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 ​

States for displaying the selected values in the trigger

	Appearance example
If nothing is selected, write "Select" + the required value.
If everything is selected, write All.
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 ellipsis.
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.

Search ​

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 disabled state.
• 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 disabled state that explains why they got this state.