Skip to content

Select / Multiselect


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


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

Trigger button types
BaseTrigger typeAppearance 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
SizeButtonTriggerLinkTriggerLinkTrigger with the color of text

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
StateButtonTriggerLinkTriggerLinkTrigger with the color of text

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
StateButtonTriggerLinkTriggerLinkTrigger with the color of text

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
ElementButtonTriggerLinkTriggerLinkTrigger 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.

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.

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.


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.

Released under the MIT License.

Released under the MIT License.