Is documented
The component is fully documented
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-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.
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.
Non-nested filters can be comprised of any of these components in any combination:
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:
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.
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.
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
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