Input - Select

Inputs that allow one or mulitple selections from a list

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

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:

Select focused example
  • 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

Inactive

Hover

Hover

Focus

Focus

Error

Error

Disabled

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

Large

Medium

Medium

Small

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

Option list

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

 

Max-height, scroll, and search example

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

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

Loading

Shown for lengthy lists that load async or while querying the string in the typeahead.

No options

No options

Shown when no options match the queried string or parameters of the selection.

Createable

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

Inactive

Hover

Hover

Active/Selected

Active/Selected

Disabled

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 - true

Truncate - false

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

Trailing string

Description

Description

Checkbox

Checkbox

Leading icon

Leading icon

Slot

Slot

 

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

Locale option item example - jp

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

Max-height + scroll + search

Locale example

Locale example

Input select - search example

Input select - search example

Sticky scroll

Sticky scroll

Metadata example

Metadata example

Input select - category example

Input select - category example

input select - badge 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.

  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.

 

  • 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)
  • 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

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy