Input - Multi-select

An input control that allows for multiple selections

Typeahead Multi-select

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 25, 2024

Checkbox Multi-Select

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 25, 2024

Overview

The Multi-Select Input component allows a selection of multiple options from a list. This component enhances user experience by providing a flexible and efficient way to make multiple selections at once.

🟢 Typeahead multi-select / Orientation=Vertical, State=Clicked, Placeholder=False

Design

Typeahead Multi-select

Input

Typeahead multi-selects allow the marketer to begin typing and the option list will be filtered by the typed value. Pressing enter adds the 'chip' to the selection.

  • First column: states when nothing has been selected; placeholder visible
  • Second column: states when at least one item has been selected.

 

States

🟢 Typeahead multi-select / Orientation=Vertical, State=Inactive, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Inactive, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Inactive, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Inactive, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Hover, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Hover, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Hover, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Hover, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Clicked, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Clicked, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Clicked, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Clicked, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Focused, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Focused, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Focused, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Focused, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Disabled, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Disabled, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Disabled, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Disabled, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Error, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Error, Placeholder=True

🟢 Typeahead multi-select / Orientation=Vertical, State=Error, Placeholder=False

🟢 Typeahead multi-select / Orientation=Vertical, State=Error, Placeholder=False

 

Dropdown

  • Select dropdowns have a max-height: 320px
Default

Default

The values in the typeahead multi-select dropdown are visually similar to the typical select and menu items.

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.

 

 

Typeahead Multi-Select Dropdown

Typeahead Multi-Select Dropdown

The values in the chip-multi select dropdown are visually similar to the typical select and menu items.

Checkbox Multi-Select Dropdown

Checkbox Multi-Select Dropdown

This is an example of the checkbox multi-select dropdown that has categories, select all, and search properties enabled.

 

Input and dropdown

No item selected

No item selected

Item selected

Item selected

Input grows as items are added

Input grows as items are added

 

Additional options

No options

No options

Shown when no options match the queried string or input parameters.

Loading

Loading

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

Createable

Createable

In some cases, the marketer may have to option to create an item that doesn't exist in the list. This should only be used in situations where additional setup to create the option isn't required—for example, creating a new campaign label could use this pattern.

Compact variation (expand on chip click)

Compact variation (expand on chip click)

Clicking on the 'chip' (+4) temporarily expands the input so all of the selected items are visible. Once focus leaves the input, it returns to it's original height.

Option limit

Option limit

If only a certain number of options are allowed to be selected, an optionLimit can be set in the component properties. Once the optionLimit is reached, the user can no longer add selections to the list until removing an option.

 

Checkbox Multi-Select

Input

Interactions are similar to a typical select. Clicking on the input opens a dropdown that allows an item list that are enabled by clicking on the label or checkbox.

 

States

🟢 Checkbox multi-select / State=Default

🟢 Checkbox multi-select / State=Default

🟢 Checkbox multi-select / State=Hover

🟢 Checkbox multi-select / State=Hover

🟢 Checkbox multi-select / State=Focus

🟢 Checkbox multi-select / State=Focus

🟢 Checkbox multi-select / State=Selected

🟢 Checkbox multi-select / State=Selected

🟢 Checkbox multi-select / State=Disabled

🟢 Checkbox multi-select / State=Disabled

🟢 Checkbox multi-select / State=Error

🟢 Checkbox multi-select / State=Error

 

Dropdown

  • Select dropdowns have a max-height: 320px

No nesting

Non-nested filters can be comprised of any of these components in any combination:

Search (boolean)

Search (boolean)

Include input search when facing lengthy lists, numerous options, or customer-generated content, such as in campaign or workflow listings.

Category (boolean)

Category (boolean)

Use category labels to separate sections when users seek categories first, then specific details. Opt for labels over text when identifying individual list items is crucial.

Metadata (boolean)

Metadata (boolean)

Metadata should be used in places where it is necessary to surface secondary pieces of information and/or when secondary pieces of information should be able to be searched.

Labels (boolean)

Labels (boolean)

Use labels when option item's status is important to the marketer's selection.

Select all (boolean)

Select all (boolean)

Includes a master checkbox for selecting/deselecting all items. Suitable for lists with many options; unnecessary for 2-3 options. For categorized lists, position the 'Select all' button to the side.

 

 

Nesting

A nested multi-select should be used when it's necessary to select parent options along with selecting child options and when the relationship between parent and children items need to be shown.

 

Nested filters can be comprised of any of these components in any combination:

Grandchildren

Grandchildren

Grandchildren should be used in places where there are multiple levels of nested pieces of information.

Search

Search

Search should appear in Checkbox multi-select dropdowns when option lists are 5 items or more.

Metadata

Metadata

Metadata should be used in places where it is necessary to surface secondary pieces of information. Metadata can be searched.

  • Checking and unchecking parent categories will impact all children beneath
  • Checking and unchecking children won’t impact anything except themselves
  • Categories with sub-categories have an accompanying accordion
  • Nested filters within nested filters can happen if needed
  • Can have optional #’s next to the chevron to display # of options within the accordion

 

Guidelines

Use cases

  • Use the Multi-Select Input component in interfaces where marketers need to make multiple selections from a list of options, such as filtering, tagging, or configuring settings.
  • Implement the component in forms, data entry fields, or configuration screens where multiple-choice selection is required.

 

Selected items float to the top

  • After a filter has been applied, and the panel is reopened, all selected filters should float to the top
  • Filters should not float to the top when customers are in the middle of selecting items
  • If a panel has categories, then selected items will float to the top within their own section

 

Loading long filter lists

Some filter lists may have numerous items in them and may take a while to load if we try to load everything at once. 

As a general rule, we should load a minimum of 20(?) items at once.

Once a customer scrolls to the bottom of the list, the panel should immediately lazy load and fetch the next set of items.

 

  • Use the typeahead multi-select as the default option—it’s more efficient, has baked in accessibility features, and scales well.
  • Use the checkbox multi-select primarily in cases where there is a nested/child relationship with some of the selections.
  • Be cautious of intermingling the Typeahead and Checkbox multi-select variants—especially within the same form. The differing interactions can create friction when the marketer is trying to complete an action.

Content

Include informative labels or placeholders within the input field to guide marketers on what types of options are available for selection. Provide clear feedback on selected items, either within the input field or in a separate container, to confirm user selections.

Accessibility

  • Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for the Multi-Select Input component
  • Ensure that keyboard navigation is supported, allowing marketers to make selections and navigate through the list of options using keyboard controls

Health

Typeahead Multi-select

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

 

Checkbox Multi-select

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