Combobox

Preview

Installation

npx shadcn@latest add @cubby-ui/combobox

Usage

import {
  Combobox,
  ComboboxClear,
  ComboboxInput,
  ComboboxInputWrapper,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
  ComboboxPopup,
  ComboboxEmpty,
  ComboboxLabel,
} from "@/components/ui/cubby-ui/combobox";

<Combobox>
  <ComboboxLabel />
  <ComboboxInputWrapper>
    <ComboboxInput />
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputWrapper>
  <ComboboxPopup>
    <ComboboxEmpty />
    <ComboboxList>
      <ComboboxItem />
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

Examples

Creatable

Allow users to create new options.

Multiple Selection

Select multiple options from the combobox.

Input Inside Popup

Place the search input within the dropdown popup.

Async Search

Load options from a remote source by fetching on input changes. The useAsyncCombobox hook handles request cancellation, loading states, and keeps the selected value visible while new results stream in.

Async Search (Multiple)

Async search with multiple selection support. Selected items remain visible in the dropdown while searching for new matches.

Grouped

Organize options into logical groups with sticky headers.

API Reference

The Combobox component is built on top of Base UI's Combobox. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Combobox documentation.

Custom Props

ComboboxPopup