View fulldotdev/ui on GitHub

Combobox

Autocomplete input with a list of suggestions.

Installation

npx shadcn@latest add @fulldev/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
<Combobox>
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxItem value="Next.js">Next.js</ComboboxItem>
      <ComboboxItem value="SvelteKit">SvelteKit</ComboboxItem>
      <ComboboxItem value="Astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Items are authored markup, so render a data array with .map(). Data Slot filters items by their label and selects one value at a time.

Composition

Place ComboboxEmpty inside ComboboxList, as required by Data Slot.

Combobox
├── ComboboxInput
└── ComboboxContent
    └── ComboboxList
        ├── ComboboxEmpty
        ├── ComboboxItem
        └── ComboboxItem

Put ComboboxSeparator between groups as a direct child of ComboboxList: Data Slot only shows separators there, and hides them when a filter leaves no items on one side.

Combobox
├── ComboboxInput
└── ComboboxContent
    └── ComboboxList
        ├── ComboboxEmpty
        ├── ComboboxGroup
        │   ├── ComboboxLabel
        │   └── ComboboxItem
        ├── ComboboxSeparator
        └── ComboboxGroup
            ├── ComboboxLabel
            └── ComboboxItem

Basic

A simple combobox with a list of frameworks.

Multiple

The Astro combobox has no multiple selection or chips, so the official Multiple and RTL examples, which both use chips, are in the React Combobox docs only.

Clear Button

Use the showClear prop on ComboboxInput to show a clear button.

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

Custom Items

You can render a custom component inside ComboboxItem. Set data-label on the item to the text used for filtering and for the input after selection.

Invalid

Use the aria-invalid prop on ComboboxInput to make the combobox invalid.

Disabled

Use the disabled prop on ComboboxInput to disable the input and its trigger, or on Combobox to disable all interaction.

Auto Highlight

Use the autoHighlight prop to automatically highlight the first item on filter.

Trigger the combobox from any button with data-slot="combobox-trigger" that contains a ComboboxValue, and move ComboboxInput inside ComboboxContent with showTrigger={false}.

Input Group

Add an addon by placing an InputGroupAddon inside ComboboxInput.

API Reference

Source: src/components/ui/combobox

Interactivity comes from @data-slot/combobox.

ComponentPropNotes
ComboboxdefaultValue, defaultOpen, placeholder, disabled, required, namename adds a hidden input that submits the value
ComboboxopenOnFocus, autoHighlightopenOnFocus defaults to true
Comboboxside, align, sideOffset, alignOffset, avoidCollisions, collisionPaddingPopup placement, also accepted on ComboboxContent
ComboboxInputshowTrigger (true), showClear (false), disabled, input attributesExtra children render inside the input group
ComboboxItemvalue, disabled, showIndicator (true), data-labelWithout data-label, the item text is the label
ComboboxTriggershowIcon (true)Ghost icon button with a chevron
ComboboxValuespan attributesShows the selected label, or placeholder when empty

The root emits combobox:change, combobox:open-change and combobox:input-change, and accepts combobox:set with value, open or inputValue in detail.