Select

Guidelines

When to use

• Long lists of options: Use Select or Multiselect for long lists of predefined options. These components allow users to filter by typing in the field and are recommended for lists with 5 or more options.
• Long forms: Use the Select components to save space in long forms.

 

When not to use

• Few options: For lists with fewer options, consider using alternative components like Radio Button Group, Checkbox Group, or Selection Card Group.
• Numeric values: Avoid Select when users need to input continuous values, such as numerical ranges. In such cases, a Stepper or Number Input might be more appropriate.
• When typing is quicker: Avoid using Select components if typing might be faster than selecting from a list and data is very familiar to users. Consider a Chip Input or Text Input instead.
• Actions: For dropdowns with multiple or secondary actions, consider using a Dropdown Button or Split Button.

 

Best practices

• Keep options clear and simple.
• Enable search for lists with many options to enhance user experience.
• Keep consistency in size and variants for all instances used on the same page. For example, if using more than one Multiselect, ensure they all use the same variant, like compact.

 

Variants

1. Select: Allows users to choose a single option from the list. The list collapses after selection, showing the chosen option in the field.
2. Multiselect: Allows users to select multiple options from the list. The list closes when clicking outside the component or on the Expand icon. On mobile, it closes by tapping the Close button.

 

---

Properties

Compact

The compact property is available only in the Multiselect, and offers the choice of a condensed or expanded view.

1. Compact: false: By default, the Multiselect shows the selected options as chips stacked in multiple lines. The field height adjusts to display all chips.
2. Compact: true: When compact is enabled, the field height is fixed, and selected options appear in a single line. If the content doesn't fit, an overflow indicator shows the number of hidden options.
3. Read-only: When there's content overflow, users can open the menu in the read-only state to view all selected options. The list shows only selected items and is not interactive.

 

Select All

The selectAllEnabled boolean property controls the visibility of the "Select All" option inside the dropdown.

When enabled, it displays the "Select All" control, allowing users to select or deselect all available options at once.

 

Clearable

The clearable boolean property controls the visibility of the Clear Button inside the field.

When enabled, it displays the button, allowing users to clear the selected value.

 

Inline

The inline boolean property hides the label to display content in a single line. Use with caution to ensure the field's purpose remains clear and accessible.

In the error state, the error icon stays inside the field, keeping everything on a single line.

 

Preserve Multiselect Search

By default, when a user types a term in the field and selects an option, the term is cleared, and the list resets to show all options.

With preserveMultiselectSearch enabled, the search term stays in the field even after selection, and the dropdown keeps showing matching items only. This is especially helpful when users need to select similar options, like services or properties.

 

---

Behavior

Mouse interactions

1. Field: Clicking on the field activates the Select. The dropdown opens, and typing is enabled.
2. Expand Button: It allows users to expand or collapse the list of options.
3. Chips: In the Multiselect, clicking the Close Button inside the Chip removes it from the selected options.
4. Clear Button: Clicking the Clear Button resets the field by removing selected options.
5. Dropdown Items: Clicking on a dropdown item selects or deselects it.
6. Closing the dropdown: Clicking or tapping outside the component closes the dropdown.

 

Keyboard interactions

 

Overflow

1. Field: When content doesn't fit in the field, the text truncates.
2. Dropdown Menu: If the content exceeds the maximum height set for the dropdown, it scrolls automatically.
3. Dropdown Item: The height adjusts as needed, ensuring the content remains fully visible.

 

Disabled items

Disabled items can be displayed within the dropdown, indicating they are not selectable.

 

Searching

Typing

• In the Select component, the selection resets when the user starts typing in the field.
• In the Multiselect, the content aligns to the right to maintain visibility.
• If the preserveMultiselectSearch property is enabled, the search term remains active after selection, and the dropdown shows only matching options.

 

Loading

The expand icon turns into a spinner to indicate loading.

 

Empty State

If no options match the search term, a message is displayed in the dropdown, informing the user that no results were found.

 

---

Content

Maintain consistent phrasing across options
Ensure all options follow the same grammatical structure for clarity.
✅ Credit card / Bank transfer / PayPal
🚫 Use credit card / Bank transfer is available / Pay with PayPal

Use sentence case without punctuation
✅ Include breakfast
🚫 Include Breakfast. / Include breakfast!

Use a noun for the label
The verb "Select" is inherent in the component. Label it with the category of things being selected.
✅ Role
✅ Rates
✅ Reservations to include
🚫 Select guests
🚫 Associate these companies

Use a verb in the placeholder
If there is a placeholder before selecting, use the verb to encourage action.
✅ Select a country
🚫 Please choose one of the following options from the list below

Be intentional about order and grouping
The goal is for lists of options to be scannable, and easy to find the desired options. They might be ordered alphabetically, by category, by most used, etc.

Avoid using full sentences or additional explanations within options
Keep options succinct; use helper text outside the dropdown if more context is needed.

 

---

Layout

Mobile adaptations

1. Drawer: The dropdown content appears in a Drawer, improving usability on smaller screens.
2. Label: The label is displayed inside the Drawer to maintain context for the user.
3. Search Input: The search input is activated by default, allowing users to filter options within the dropdown.
4. Extra Large size: Use the Extra Large variant to provide a better experience.

 

Footer usage

The dropdown can include a footer if needed, but it should be used with caution.

Use it for list-related actions, with a subtle option like a Ghost Button. Align the button to the left, following the list’s reading direction. The footer should blend naturally with the list and don’t need to stick to the bottom.

 

---

References