Select

Component checklist

Types

Depending on the number of items the user can choose, you'll use a simple select or a multi-select.

 

Select

Use the simple select when the user can only choose one item from a list.

 

The characteristics of a simple select

• By default, and as long as the options list is closed, the select displays a placeholder text
• The options list appears upon clicking
• The list closes by clicking one of the fields or outside the select

 

---

 

Multi-select

Use the multi-select when the user can choose multiple items from a list.

 

The characteristics of a multi-select

• By default, and as long as the options list is closed, the multi-select displays a placeholder text
• The options list appears with a click. Each item in the list can consist of a piece of text, or a piece of text and an icon, with a checkbox on the left side.
• The list stays open while the user selects items. The list closes by clicking the Apply button or outside of the select

 

---

 

Formatting

Anatomy

Our selects are composed of several elements, as shown in the following picture and descriptions.

 

1. Trigger: The trigger is always shown in the UI, whether the select is open or closed, and is a combination of a title, trigger area, and error message.
2. List: The list combines a header, items the user can choose from, and a footer in case of multi-select.

 

---

 

Trigger anatomy

The trigger is always shown in the UI, whether the select is open or closed, and combines a title, trigger area, and error message.

 

1. Title: The title is a text informing the users about what to expect in the options list. Keep the title as short as possible; limit it to a single line of text. It is optional to include a help icon with a tooltip explaining the select's meaning on the right side of the title.
2. Counter: Selects may have a selection limit represented by the counter. Use the counter to let users know how many items can be selected.
3. Shortcut: Select may have predefined content as a default state. Use the shortcut to help users quickly reset the select to the default state.
4. Trigger area: The trigger is always shown in the UI, whether the select is open or closed.
5. Content: Use sentence-style capitalization; in most cases, write the text as a direct statement without punctuation.
6. For multi-selects, the default content in the trigger is usually represented by placeholder text that provides hints or examples of what to enter. It disappears after the user selects data.
7. For simple selects, there is usually a default value instead.
8. Error message: The error text is a short message that helps users finish the required selection if they do something wrong.

 

---

 

List anatomy

The list is the combination of a header, items the user can choose from, and a footer in case of multi-select.

 

1. Header: The header is shown on top of the items and is a fixed part of the select list. It contains a search field by default, but in case the select includes multiple levels the name of the category must be displayed with an action to go back to the previous level.
2. Items: Items represent each one of the user's choices. All items are shown together in the list.
3. Footer: The footer is visible only in case of multi-select. It contains only the apply button by default.

 

---

 

Variations

The previously described structure shows the default version of a select. However, in practice, the structure may vary. The variations are described in the following text.

 

Trigger variations

We differentiate three variations of the select triggers by the position and visibility of the title.

 

1. The title is above: The select with a title above the trigger is the default variant that should work in most cases. It is optional to include a help icon with a tooltip explaining the select's meaning on the right side of the title.
2. The title is inside: The select with a title inside the trigger is ideal for dense interfaces. Only use it when you lack space.
3. The title is not visible: Avoid using select without a title. Use it only in combination with a headline or as a part of a sentence when it’s clear what the user can select.

 

---

 

List variations

We differentiate two variations of the select lists by their complexity. The simple variant is the default one and is used in most cases. A list with a side menu is used in cases where the design needs to split a list into several categories.

Each variation can be represented as a simple select or multi-select.

 

1. Simple: Use a simple list if there’s only one item category to select.
2. With a side menu: Use the list with a side menu when the select contains several categories that need to be displayed separately. For example, it can be used to select social profiles by platform. The menu with the categories is always located outside the regular list field. By default, the categories menu is located on the right side. When there is no space on the right (e.g. side panels), the menu should be located on the left side to respect the condition of being located out of the regular list field.

Note: If there are more categories, for example, social platforms and ownership, the side category menu should be divided into subcategories. Headlines and lines are separate subcategories.

 

---

 

Validation and errors

Validation helps streamline the process and keep data clean when the user fills out forms.

 

 

Selection counter

Selects may have a selection limit represented by the counter. Use the counter to let users know how many items can be selected.

 

 

Behavior

Search

We allow users to full-text search over the list of items to give them quick access to their needs.

 

• A search is available only if there are ten or more items
• The search is focused immediately after the list is shown
• The search runs automatically after the first letter is typed
• Matches are highlighted
• We show an empty state if the user starts the search with 0 results

 

---

 

Apply button & footer

 

• The apply button is located at the bottom of the list in the footer
• Its default state is disabled until the user selects at least one item
• If the height of the list is less than 250px, the footer is shown under the list
• The button is shown over the list if the height is more than 251px

 

---

 

Recently used

Use the recently used items if the user often selects the same items in a row or a short period.

 

• The recently used items are always on the top of the list
• There are a maximum of four recently used items displayed
• There is no checkbox to select all recently used items

 

---

 

Nesting and grouping

Use nested items or item groups in case you need to visualize similar items together grouped by type or origin.

 

Nesting

• Use nesting to visualize a subset of items for the main one to give a user the option to specify selection better.
• Nested items are differentiated by increasing the left padding to 18px for each level.

Grouping

• Use grouping to display items with the same or similar origin. This group should start with a headline item to display the group name.
• Groups should be separated ideally by the divider.

 

 

---

 

Selection

Select

• There is always a default option selected, and users can select another one from the list to change it.
• Users can always select only one item.
• The selection is confirmed immediately after the user
• clicks an item by mouse
• hits Enter
• hits Space
• The selection is canceled:
• by clicking outside of the box
• clicking to the field
• hitting Escape
• The selected item appears in the field.
• The selected item is in the first position when the select reopens.
• The "Reset to default" option can be shown to help the user get back to the default state.

 

Multiselect

• The user can select multiple items individually or “select all” if available.
• The user sees selected items in the trigger immediately.
• In case the value of the selected item(s) fits into the trigger, we display the whole value. Once the selection hits the trigger's width, value(s) are replaced by "X items selected" info.
• "X" represents a number of selected items
• "items" should be replaced by the name of the origin of items, e.g. profiles, labels, colors, etc...
• The possibility to Select all is optional.
• Use Select all when the user may need to select everything in the list.
• Don't use it if it could cause performance issues or make the user experience worse.
• An item in the multi-select is selected:
• clicking an item by mouse
• hitting Enter
• The selection is confirmed
• by clicking the apply button
• by double Enter
• by Space
• The selection is canceled:
• by clicking outside the box or on the field
• by Escape
• The selected items appear in the field and follow these conditions:
• We show the total value if the total count of letters can fit in the field.
• If the total count of the letters exceeds the space in the field, we show the number of the selected items and the name of the category of the selected items: e.g., 12 content labels selected.
• The selected items are in the first position when the select is reopened as a separate section.
• The items are grouped in a new section called “Selected.” The section is visible only if at least one item is selected and confirmed by the apply button.

 

---

 

Keyboard

Select

• The select field is the element that receives focus. All keyboard interactions happen from this element.
• Users can move the highlighted item to the next option by pressing the Down arrow.
• Users can move the highlighted item to the previous option by pressing the Up arrow.
• Users can close the select by
• pressing Escape to cancel a selection
• pressing Space or Enter to provide a selection
• Once the field is focused, the user can show a list by Enter or Space

 

Multiselect

• Once an item in the select is focused, users can press Enter to select or deselect the item.
• Users can close the select by
• pressing Space or double Enter to provide a selection
• pressing Escape to cancel a selection
• Once the field is focused, user can show a list by Enter or Space