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
Inactive
Hover
Focus
Error
Disabled
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)
Large
Medium
Small
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.
Option list
The Option List has a max-width of 480px, and a max-height of 320px, at which point the overflow will scroll.
If it’s expected that the Option List will scroll or have an unpredictable number of options to select from, it’s best to include a sticky search at the top of the Option List to make finding the selection easier.
Max-height, scroll, and search example
In this example, the available options exceed the max-height of the Option List, enabling a scroll. Given that this is user-generated content and could be 'n' number of items, including a search makes it more efficient for marketers to access the content they need.
Typeahead States
Default
The default OptionList has a collection of OptionItems that can be selected from. In Typeahead selects, the OptionList will narrow the results based on the string in the input.
Loading
Shown for lengthy lists that load async or while querying the string in the typeahead.
No options
Shown when no options match the queried string or parameters of the selection.
Createable
Allows the user to create an item by pressing 'Enter' on the keyboard—this creates and adds the option to the selection.
Option Item
These are the individual selections available in the Option List.
Option Item States
Inactive
Hover
Active/Selected
Disabled
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.
Truncate - true
Truncate - false
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.
Trailing string
Description
Checkbox
Leading icon
Slot
Below is an example of how the props can be combined to compose a robust Option Item
Locale option item example - jp
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
Max-height + scroll + search
Locale example
Input select - search example
Sticky scroll
Metadata example
Input select - category example
input select - badge example
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.
Single Select: Allows users to choose a single option from the dropdown list. The option selected is shown as the value.
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.
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.
Do
Provide a placeholder or instruction that guides users on making a selection
Implement a searchable option lists in cases where there are 7 or more options in the list to select from
Auto-focus the search when the select is clicked (if applicable)
Don't
Avoid using Input Selects for binary choices; toggle switches or checkboxes are more appropriate
Do not overcrowd the UI with too many Input Selects close together, which can lead to user confusion
Refrain from using Input Selects for navigation purposes; links or navigation menus are better suited for this
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
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova