Avala Design
← Components/patterns

MultiSelect

Carbon-spec multi-select dropdown. Built on top of cmdk for filtering + Popover for the dropdown surface. Selected items shown as Tags inside the trigger.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { MultiSelect, MultiSelectOption } from "@avala/design";

<MultiSelect>
  <MultiSelectOption />
</MultiSelect>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-multiselect--defaultOpen in Storybook →

When to use

  • Multi-select with >7 options where the user benefits from typing to filter.
  • Any tag / category picker where the order of selections doesn't matter.
  • Form fields that produce arrays of values (assignees, labels, project IDs).

When not to use

  • Single selection → use `ComboBox` (single-select with filtering) or `Select` (no filtering).
  • Inline filter chips on a toolbar where each chip toggles a filter independently → use `Tag` variant="selectable".
  • Hierarchical / tree-shaped selection → use `TreeView` and lift selection state.