Combobox

Autocomplete input with a list of suggestions.

"use client"

import {

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/combobox.json

Usage

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
export function ExampleCombobox() {
  return (
    <Combobox allowsEmptyCollection>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxList
          renderEmptyState={() => (
            <ComboboxEmpty>No items found.</ComboboxEmpty>
          )}
        >
          {frameworks.map((item) => (
            <ComboboxItem key={item} id={item}>
              {item}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Composition

Simple

A single-line input and a flat list (see Basic).

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

With chips

Multi-select with multiple, chips, and a chips input (see Multiple).

Combobox
├── ComboboxChips
│   ├── ComboboxChipList
│   │   └── ComboboxChip
│   └── ComboboxChipsInput
└── ComboboxContent
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

With groups and collection

Nested items per group using ComboboxGroup, with a separator between groups (see Groups).

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

Custom Items

Use textValue when your items render JSX children.

import * as React from "react"
 
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
 
type Framework = {
  label: string
  value: string
}
 
const frameworks: Framework[] = [
  { label: "Next.js", value: "next" },
  { label: "SvelteKit", value: "sveltekit" },
  { label: "Nuxt", value: "nuxt" },
]
 
export function ExampleComboboxCustomItems() {
  return (
    <Combobox allowsEmptyCollection>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxList
          renderEmptyState={() => (
            <ComboboxEmpty>No items found.</ComboboxEmpty>
          )}
          items={frameworks}
        >
          {(framework) => (
            <ComboboxItem id={framework.value} textValue={framework.label}>
              <span>{framework.label}</span>
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Multiple Selection

Use multiple with chips for multi-select behavior.

import * as React from "react"
 
import {
  Combobox,
  ComboboxChip,
  ComboboxChipList,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
 
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
export function ExampleComboboxMultiple() {
  const [value, setValue] = React.useState<string[]>([])
 
  return (
    <Combobox
      selectionMode="multiple"
      value={value}
      onChange={setValue}
      allowsEmptyCollection
    >
      <ComboboxChips>
        <ComboboxChipList<{ name: string }>>
          {(value) => <ComboboxChip id={value.name}>{value.name}</ComboboxChip>}
        </ComboboxChipList>
        <ComboboxChipsInput placeholder="Add framework" />
      </ComboboxChips>
      <ComboboxContent>
        <ComboboxList
          renderEmptyState={() => (
            <ComboboxEmpty>No items found.</ComboboxEmpty>
          )}
        >
          {frameworks.map((item) => (
            <ComboboxItem key={item} id={item}>
              {item}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Basic

A simple combobox with a list of frameworks.

"use client"

import {

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

Next.js

"use client"

import * as React from "react"

Clear Button

Use the showClear prop to show a clear button.

"use client"

import {

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

"use client"

import {

Custom Items

You can render custom component inside ComboboxItem.

"use client"

import {

Invalid

Use the isInvalid prop to make the combobox invalid.

"use client"

import {

Disabled

Use the isDisabled prop to disable the combobox.

"use client"

import {

Input Group

You can add an addon to the combobox by using the InputGroupAddon component inside the ComboboxInput.

"use client"

import { GlobeIcon } from "@phosphor-icons/react"

RTL

To enable RTL support, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference

See the React Aria documentation for more information.

Color Picker Command

On This Page

Installation Usage Composition Simple With chips With groups and collection Custom Items Multiple Selection Basic Multiple Clear Button Groups Custom Items Invalid Disabled Input Group RTL API Reference