Avala Design
← Components/patterns

ComboBox

Carbon-spec single-select with free-text filtering. Built on cmdk + Popover. Distinct from Select (no free-text) and MultiSelect (multi).

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 { ComboBox, ComboBoxOption } from "@avala/design";

<ComboBox>
  <ComboBoxOption />
</ComboBox>

All variants

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

patterns-combobox--defaultOpen in Storybook →

When to use

  • A single-choice list of >7 options where the user benefits from typing to filter (countries, projects, tags).
  • Pickers where the option labels are user-readable and substring-search is the right mental model.

When not to use

  • ≤7 fixed options where filtering adds no value → use `Select`.
  • Multiple selections → use `MultiSelect`.
  • Async / paginated server-side options at scale → consider building a <CommandPalette>-style remote-source variant; ComboBox holds the full option list in memory.