MultiSelect

In contrast to React Select and Ant Design APIs, Coral layers the abstractions from the lowest level possible up to higher ones. So, if your use cases does not fit with some components, you can always use lower one instead.

Otherwise, it could end up with hundreds of props like in React Select, which probably very hard to maintain and fulfill developer’s vast requirements.

In your app, if some structures in MultiSelect become repetitive, you can always make your own reusable component with a higher abstraction.

Example

Basic usage

By default, Coral’s MultiSelect adds search input and you may need to handle the filter manually.

In many other cases, you may want to just have a simple multi select, you can pass null to searchElement prop like example below.

An icon button can be used to trigger dropdown selection too.

Customizing what to render

When you’re using search input (it’s added by default), note that the filtered options are not handled by Coral. This in most cases easier for async search, so that it avoids any confusing result callback.

Even so, component MultiSelectHighlighter is provided, which is basically a simple wrapper of react-highlight-words library with current search query.

In this following example, it excludes the selected from the list, which is like in React Select. Generally, the experience is more seamless for keyboard users because they can repeteadly press Enter on the highlighted option.

Custom Selected Items

By default, Coral’s MultiSelect renders selected items as MultiSelectChips, accepting value prop. You can replace this with your custom content or a simple string like example below.

Note that MultiSelectChip is an InputChip enhanced with multi-select specific handlers.

When working with MultiSelectInputText, there are two states where the selected items will be rendered and customized. Customizing the selected items when MultiSelect is closed can be done through renderText prop, and when MultiSelect is opened, the customization can be done directly through the renderChip prop.

Input Text and Max Tag

Though it should be simple enough to implement, Coral provides the two common input components: MultiSelectInputText and MultiSelectInputTag, which basically wraps MultiSelectInput with a higher level abstractions.

However, if you find your use cases do not fit with these components, you should fallback to MultiSelectInput component which has more powerful customization features.

Disabled

Invalid

Virtualized

Small wrapper of SelectVirtualizedList By default, item height is 40, can manually change it by set itemSize props

Customizing Popper Reference

By default, MultiSelectList popup is placed on the bottom of MultiSelectInput. To customize this, you can set the reference to the search element or any other element by specifying popperReference prop on MultiSelectList component.

Below is an example of setting MultiSelectSearch as the popup reference:

Accessibility

Comparing to other related libraries, Coral is fairly superior than Ant Design (can’t navigate through selected items) and slightly better than React Select (does not always reset to first item on select).

Try navigating through selected chips using Arrow Left, Arrow Right, and Backspace to unselect.

Relevant components

• Select

References

• React Select: https://react-select.com/home#animated-components
• Material-UI: https://material-ui.com/components/autocomplete/#multiple-values
• Ant Design: https://ant.design/components/select/#components-select-demo-size

API

MultiSelect

MultiSelectChip

MultiSelectEllipsisTooltip

MultiSelectHighlighter

MultiSelectIconButton

MultiSelectInput

MultiSelectInputMaxTag

MultiSelectInputText

MultiSelectList

MultiSelectListFooter

MultiSelectListSearch

MultiSelectOption

MultiSelectSearch

MultiSelectVirtualizedList