Combobox: Search inside the popup

Use <ComboboxTrigger /> for a select-like field. Put the input inside <ComboboxContent /> and it becomes a search box with an icon, and the popup widens to at least 15rem.

"use client"

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

const countries = [
  { value: "ar", label: "Argentina" },
  { value: "au", label: "Australia" },
  { value: "br", label: "Brazil" },
  { value: "ca", label: "Canada" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "in", label: "India" },
  { value: "jp", label: "Japan" },
  { value: "mx", label: "Mexico" },
  { value: "nl", label: "Netherlands" },
  { value: "uk", label: "United Kingdom" },
  { value: "us", label: "United States" },
]

export function ComboboxPopupSearch() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Combobox items={countries}>
        <ComboboxTrigger aria-label="Country">
          <ComboboxValue placeholder="Select a country" />
        </ComboboxTrigger>
        <ComboboxContent>
          <ComboboxInput placeholder="Search countries" />
          <ComboboxEmpty>No country found.</ComboboxEmpty>
          <ComboboxList>
            {(item: (typeof countries)[number]) => (
              <ComboboxItem key={item.value} value={item}>
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}

Add this example

This adds the example as components/examples/combobox/popup-search.tsx, together with the Combobox component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/combobox-popup-search.json

To add only the component, follow the Combobox installation.

Props in this example

The Combobox props this example sets, from the API reference.

Combobox

Prop	Type	Default
`items`The options. Filtered as you type and passed to the list’s render function.	`Item[] \| Group[]`	`–`

ComboboxInput

Prop	Type	Default
`placeholder`	`string`	`–`

ComboboxValue

Prop	Type	Default
`placeholder`Shown while nothing is selected.	`ReactNode`	`–`

ComboboxItem

Prop	Type	Default
`value`The item this row represents.	`Item`	`–`

Every prop is in the Combobox API reference.

More Combobox examples

See them all, with keyboard support and accessibility notes, on the Combobox page.