Overview

Input Selects, often referred to as drop-downs or dropdown menus, are common interface elements that allow marketers to choose one or more options from a list.

 

Design

Structure

Input Selects are composed of a field container, a dropdown icon, and a list of options. The components include:

• Label: A label that describes the input and provides affordance to what can be selected
• Input: clicking triggers the Options list
• Options List: The list that appears when the Input Select is activated, showing available choices.
• Option Item: Individual selectable elements within the list.

 

Input

States

Sizes (height)

There are 3 height variations for selects. In most cases, the default size (Large) should be used. Additional sizes can be used when there is limited space, or the elements nearby use a smaller height than the default select.

• Large (40px; default)
• Medium (36px)
• Small (32px)

 

Option List

The Option List, colloquially known as a “dropdown,” is the list of available options that the marketer can select from when clicking on the input.

The Option List has a max-width of 480px, and a max-height of 320px, at which point the overflow will scroll.

 

Typeahead States

Option Item

These are the individual selections available in the Option List.

Option Item States

 

Truncation

By default, Option Items should truncate, indicated by "…”. There is a prop to wrap the text when showing the full string is more efficient/necessary than showing a larger number of items.

 

Properties

There a handful of properties that can be enabled for the Option Item. Additionally, the 'slot’ option can be used to include custom variations that may be specific to a design or feature.

 

Below is an example of how the props can be combined to compose a robust Option Item

Guidelines

• If a select has 7 or more options to select from, it should include a typeahead search at the top of the dropdown menu. When the input is clicked, the search should be auto-focused by default, so that the user can begin typing to filter the available options.
• Clicking the cancel (X) button in the right of the search clears the text and menu filter (but not any of its selections).
• If a select does include a search, it's auto-focused. If not, and an item is selected, the selected item receives the focus when the input is clicked. If the select does not include a search, and does not have an item selected, the first item in the list is shown in the select.

Examples

Choosing the right select type

While there are multiple variations of the select, the select input itself all share the same visual style. Choose the appropriate select based on the number and type of choices alongside the jobs to be done when designing.

1. Single Select: Allows users to choose a single option from the dropdown list. The option selected is shown as the value.
2. Multi-Select: Enables users to select multiple options from the dropdown list. Selected options are viewed as a string (i.e. "3 campaigns selected"). View Input - Multi-select for more information on this type of select.
3. Searchable Select: Includes a search field within the dropdown to filter options, useful for long lists. View Input - Search for more information on this type of select.

 

 

Content

• Use concise, descriptive labels for each option to ensure they are understood by all users.
• For Multi-Select variants, consider how selected options will be displayed and ensure they can be easily removed.
• When implementing a Searchable Select, provide prompt text within the search field to indicate its functionality.

 

Accessibility

• Keyboard Navigation: Ensure that all Input Selects can be navigated using the keyboard, including opening the dropdown, selecting options, and navigating within the options list.
• Screen Reader Support: Use appropriate ARIA roles and attributes to ensure that the structure and changes in state (e.g., expanded or collapsed) are conveyed to screen reader users.
• Focus Management: Manage focus effectively, particularly for complex variants like the Searchable Select, to ensure a seamless keyboard navigation experience.
• Contrast and Visibility: Adhere to WCAG guidelines for color contrast to ensure that all text and interactive elements within the Input Select are easily discernible.

Health