Combo Box

A text field that filters a menu of choices as you type.

@cupertinoui/comboboxBase UI Combobox Registry JSON

"use client"

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

const cities = ["Amsterdam", "Berlin", "Cupertino", "London", "Los Angeles", "New York", "Paris", "San Francisco", "Tokyo", "Zagreb"]

// A combo box, as for World Clock's city: type to filter, or open the list.
export default function ComboboxDemo() {
  return (
    <Combobox items={cities}>
      <ComboboxInput placeholder="Choose a city" className="w-56" />
      <ComboboxContent>
        <ComboboxEmpty>No cities found.</ComboboxEmpty>
        <ComboboxList>
          {(city: string) => (
            <ComboboxItem key={city} value={city}>
              {city}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/combobox

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Combobox items={cities}>
  <ComboboxInput placeholder="Choose a city" />
  <ComboboxContent>
    <ComboboxList>
      {(city) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

API Reference

Every part forwards the props of the underlying Base UI Combobox part. The props below are the ones CupertinoUI adds or changes.

Combobox

Prop	Type	Description
`items`	`T[]`	The choices; ComboboxList renders each with a function.
`value / onValueChange`	`T`	The chosen item.
`multiple`	`boolean` Default: `false`	Chips for several choices (ComboboxChips).
`className`	`string`	Extra classes, merged with the component's own.

ComboboxInput

Prop	Type	Description
`showTrigger / showClear`	`boolean`	Show the menu button, or a clear button.
`className`	`string`	Extra classes, merged with the component's own.