Combobox

Searchable dropdown for selecting from a list of options with keyboard navigation

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.

Labels

Multiple Selection

Select multiple options from the combobox.

Programming languages

Place the search input within the dropdown popup.

Select country

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.

Search employees

Async Search (Multiple)

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

Assign team members

Grouped

Organize options into logical groups with sticky headers.

Select produce

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.

Props

ComboboxPopup

Dropdown container for the option list with positioning. Composes Base UI's Combobox.Positioner and Combobox.Popup. Props are forwarded to Combobox.Popup.

Prop

Type

Default

ComboboxList

Scrollable list of selectable options. Wraps Base UI's Combobox.Listbox.