0

Combobox

PreviousNext

Autocomplete input with a list of suggestions.

"use client"

import {

Installation

bunx --bun shadcn@latest add @ondo-ui/combobox

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 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>
  )
}

Composition

Simple

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

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

With chips

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

Combobox
├── ComboboxChips
│   ├── ComboboxValue
│   │   └── ComboboxChip
│   └── ComboboxChipsInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

With groups and collection

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

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

Examples

Basic

A simple combobox with a list of frameworks.

"use client"

import {

Size

Use the size prop on Combobox to scale the whole control. xs, sm, default, lg, xl, and 2xl.

At xl and 2xl the popup scales with the input — item text, padding, and the check indicator grow, and the corner radius matches the input that opened it. Chips scale too when using ComboboxChips.

"use client"

import * as React from "react"

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

"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 a custom component inside ComboboxItem.

"use client"

import {

Invalid

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

"use client"

import {

Disabled

Use the disabled prop to disable the combobox.

"use client"

import {

Auto Highlight

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

"use client"

import {

You can trigger the combobox from a button or any other component by using the render prop. Move the ComboboxInput inside the ComboboxContent.

"use client"

import { Button } from "@/components/ui/button"

Input Group

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

"use client"

import { IconGlobe } from "@tabler/icons-react"

API Reference

The component wraps Base UI Combobox and accepts all of its props.

Combobox also accepts size — "xs" | "sm" | "default" | "lg" | "xl" | "2xl", default "default" — which scales the input, the popup, and any chips together.