Combobox

Installation

npx shadcn@latest add @blank/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"

<Combobox items={frameworks}>
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={String(item)} value={item}>
          {String(item)}
        </ComboboxItem>
      )}
    </ComboboxList>
    <ComboboxEmpty>No framework found.</ComboboxEmpty>
  </ComboboxContent>
</Combobox>

Examples

Multiple

multiple keeps an array. Render the chosen values as ComboboxChips inside ComboboxChips, with ComboboxChipsInput for typing.

Clear and icon

showClear swaps the chevron for a clear button once there is a value; leadingIcon takes any icon.

Sizes

The same 32, 36 and 40 px as Input and Select.

API Reference

Combobox

Every div prop, plus:

ComboboxInput

Every input prop except value and onChange, plus:

ComboboxChips

ComboboxList

children is either nodes or a function called once per item that matches the query.

ComboboxItem