Shadcn Combobox

A combobox is an input with a filterable list. Type a few letters, arrow to a row, Enter to pick it. Use it for countries, timezones, or frameworks — any closed set that is faster to search than to scroll.

Usage

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

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

items is the list. Pass a string[], or objects plus itemToStringValue.

Composition

A single-line input and a flat list.

Multi-select uses chips and ComboboxChipsInput.

Groups nest ComboboxCollection inside each ComboboxGroup.

Basic

A single-line input and a flat list of frameworks.

Multiple

multiple plus chips. Backspace removes the last chip.

Clear Button

showClear on ComboboxInput. It appears once something is selected.

Groups

ComboboxGroup plus ComboboxLabel, with a ComboboxSeparator between regions.

Custom Items

itemToStringValue when items are objects. The row can be an Item with a title and a description.

Invalid

aria-invalid on ComboboxInput. data-invalid on Field if the label should go red too.

Disabled

disabled on ComboboxInput greys the field and blocks the list.

Auto Highlight

autoHighlight highlights the first match as you type. Enter selects it.

Popup

render a Button as the trigger. Move ComboboxInput inside ComboboxContent.

Input Group

Drop an InputGroupAddon inside ComboboxInput — a globe, a kbd, whatever the field is.

RTL

Wrap with DirectionProvider and dir="rtl". Copy stays Arabic.

API

ComboboxInput

ComboboxContent

ComboboxItem

ComboboxChip takes showRemove. ComboboxEmpty, ComboboxGroup, ComboboxLabel, and ComboboxSeparator take className.

Keyboard

Notes

Chips need useComboboxAnchor on the field and anchor on ComboboxContent. The value must be one of items — type to filter, not to invent.

With other components

Questions

Related