Combobox

Usage

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxList,
  ComboboxItem,
} from '@acronis-platform/ui-react';

Combobox is a searchable select built on Base UI's Combobox: a typeable input that filters a list of items in a dropdown. It's themed with the --ui-input-select-* tokens, so it matches InputSelect — use Combobox when the list is long enough to need filtering, InputSelect when it isn't.

Pass items to the root; when they're { value, label } objects the label/value are extracted automatically for display, filtering, and form submission. The ComboboxList children may be a function (item) => … that maps over the filtered items.

Design-pending v1. The legacy shadcn-uikit combobox was only a hardcoded Popover + cmdk demo; this is a real, reusable component built on Base UI.

Examples

const frameworks = [
  { value: 'next', label: 'Next.js' },
  { value: 'astro', label: 'Astro' },
];

<Combobox items={frameworks}>
  <ComboboxInput placeholder="Search framework…" clearable />
  <ComboboxContent>
    <ComboboxEmpty>No framework found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Pair it with a Field for a label, description, and error, or set aria-label on ComboboxInput.

ComboboxContent renders the dropdown in a portal. When the combobox lives inside an isolated container (e.g. a shadow root), wrap the app in PortalContainerProvider so the popup mounts inside that scope and inherits its styles — see Shadow DOM Integration. An explicit portalContainer on ComboboxContent overrides the context for a single dropdown.

API Reference

The root (Combobox) takes Base UI Combobox props — items, value / defaultValue, onValueChange, multiple, open / defaultOpen, disabled, name. ComboboxContent accepts the Base UI popup props plus side (default 'bottom'), align (default 'start'), sideOffset (default 4), and portalContainer. ComboboxList, ComboboxItem, ComboboxEmpty, ComboboxGroup, and ComboboxGroupLabel accept their Base UI part props plus className.