Combobox

An input combined with a list of predefined items to select.

"use client"

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
]

export function ComboboxDemo() {
  return (
    <Combobox items={items}>
      <ComboboxInput placeholder="Select a item…" aria-label="Select a item" />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

Installation


pnpm dlx shadcn@latest add https://coss.com/ui/r/combobox.json

Usage

Single Selection

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
 
<Combobox items={items}>
  <ComboboxInput placeholder="Select an item..." />
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

Multiple Selection

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
 
<Combobox items={items} multiple>
  <ComboboxChips>
    <ComboboxValue>
      {(value: { value: string; label: string }[]) => (
        <>
          {value?.map((item) => (
            <ComboboxChip key={item.value} aria-label={item.value}>
              {item.label}
            </ComboboxChip>
          ))}
          <ComboboxInput
            placeholder={value.length > 0 ? undefined : "Select a Select an item..."}
            aria-label="Select an item"
          />
        </>
      )}
    </ComboboxValue>
  </ComboboxChips>
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

API Reference

The ComboboxInput component extends the original Base UI component with a few extra props:

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	The size variant of the input field.
`showTrigger`	`boolean`	`true`	Whether to display a trigger button (chevron icon) on the right side of the input.
`showClear`	`boolean`	`false`	Whether to display a clear button (X icon) on the right side of the input when there is a value.

Examples

Disabled

"use client"

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
]

export function ComboboxDisabled() {
  return (
    <Combobox items={items} defaultValue={items[2]} disabled>
      <ComboboxInput
        placeholder="Select an item…"
        aria-label="Select an item"
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

Small Size

"use client"

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  { value: "strawberry", label: "Strawberry" },
  { value: "mango", label: "Mango" },
  { value: "pineapple", label: "Pineapple" },
  { value: "kiwi", label: "Kiwi" },
  { value: "peach", label: "Peach" },
  { value: "pear", label: "Pear" },
]

export function ComboboxSm() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        size="sm"
        placeholder="Select an item..."
        aria-label="Select an item"
      />
      <ComboboxPopup>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

Large Size

"use client"

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  { value: "strawberry", label: "Strawberry" },
  { value: "mango", label: "Mango" },
  { value: "pineapple", label: "Pineapple" },
  { value: "kiwi", label: "Kiwi" },
  { value: "peach", label: "Peach" },
  { value: "pear", label: "Pear" },
]

export function ComboboxLg() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        size="lg"
        placeholder="Select an item..."
        aria-label="Select an item"
      />
      <ComboboxPopup>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

With Label

Fruits

"use client"

import { useId } from "react"

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  { value: "strawberry", label: "Strawberry" },
  { value: "mango", label: "Mango" },
  { value: "pineapple", label: "Pineapple" },
  { value: "kiwi", label: "Kiwi" },
  { value: "peach", label: "Peach" },
  { value: "pear", label: "Pear" },
]

export function ComboboxWithLabel() {
  const id = useId()
  return (
    <Combobox items={items}>
      <div className="flex flex-col items-start gap-2">
        <Label htmlFor={id}>Fruits</Label>
        <ComboboxInput
          id={id}
          placeholder="Select an item..."
          aria-label="Select an item"
        />
      </div>
      <ComboboxPopup>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

Auto Highlight

Automatically highlight the first matching option.

"use client"

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  { value: "strawberry", label: "Strawberry" },
  { value: "mango", label: "Mango" },
  { value: "pineapple", label: "Pineapple" },
  { value: "kiwi", label: "Kiwi" },
  { value: "peach", label: "Peach" },
  { value: "pear", label: "Pear" },
]

export function ComboboxAutohighlight() {
  return (
    <Combobox items={items} autoHighlight>
      <ComboboxInput
        placeholder="Select an item..."
        aria-label="Select an item"
      />
      <ComboboxPopup>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

With Clear Button

"use client"

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
]

export function ComboboxWithClear() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        placeholder="Select a item…"
        aria-label="Select a item"
        showClear
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

With Groups

"use client"

import * as React from "react"

import {
  Combobox,
  ComboboxCollection,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxSeparator,
} from "@/components/ui/combobox"

// Grouped items demo
type Tag = { id: string; label: string; group: "Status" | "Priority" | "Team" }
type TagGroup = { value: string; items: Tag[] }

const tagsData: Tag[] = [
  // Status
  { id: "s-open", label: "Open", group: "Status" },
  { id: "s-in-progress", label: "In progress", group: "Status" },
  { id: "s-blocked", label: "Blocked", group: "Status" },
  { id: "s-resolved", label: "Resolved", group: "Status" },
  { id: "s-closed", label: "Closed", group: "Status" },
  // Priority
  { id: "p-low", label: "Low", group: "Priority" },
  { id: "p-medium", label: "Medium", group: "Priority" },
  { id: "p-high", label: "High", group: "Priority" },
  { id: "p-urgent", label: "Urgent", group: "Priority" },
  // Team
  { id: "t-design", label: "Design", group: "Team" },
  { id: "t-frontend", label: "Frontend", group: "Team" },
  { id: "t-backend", label: "Backend", group: "Team" },
  { id: "t-devops", label: "DevOps", group: "Team" },
  { id: "t-qa", label: "QA", group: "Team" },
  { id: "t-mobile", label: "Mobile", group: "Team" },
  { id: "t-data", label: "Data", group: "Team" },
  { id: "t-security", label: "Security", group: "Team" },
  { id: "t-platform", label: "Platform", group: "Team" },
  { id: "t-infra", label: "Infrastructure", group: "Team" },
  { id: "t-product", label: "Product", group: "Team" },
  { id: "t-marketing", label: "Marketing", group: "Team" },
  { id: "t-sales", label: "Sales", group: "Team" },
  { id: "t-support", label: "Support", group: "Team" },
  { id: "t-research", label: "Research", group: "Team" },
  { id: "t-content", label: "Content", group: "Team" },
  { id: "t-analytics", label: "Analytics", group: "Team" },
  { id: "t-operations", label: "Operations", group: "Team" },
  { id: "t-finance", label: "Finance", group: "Team" },
  { id: "t-hr", label: "HR", group: "Team" },
  { id: "t-legal", label: "Legal", group: "Team" },
  { id: "t-growth", label: "Growth", group: "Team" },
  { id: "t-partner", label: "Partner", group: "Team" },
  { id: "t-community", label: "Community", group: "Team" },
  { id: "t-docs", label: "Docs", group: "Team" },
  { id: "t-l10n", label: "Localization", group: "Team" },
  { id: "t-a11y", label: "Accessibility", group: "Team" },
  { id: "t-sre", label: "SRE", group: "Team" },
  { id: "t-release", label: "Release", group: "Team" },
  { id: "t-architecture", label: "Architecture", group: "Team" },
  { id: "t-ux", label: "UX", group: "Team" },
  { id: "t-ui", label: "UI", group: "Team" },
  { id: "t-management", label: "Management", group: "Team" },
]

function groupTags(tags: Tag[]): TagGroup[] {
  const groups: Record<string, Tag[]> = {}
  for (const t of tags) {
    ;(groups[t.group] ??= []).push(t)
  }
  const order: Array<TagGroup["value"]> = ["Status", "Priority", "Team"]
  return order.map((value) => ({ value, items: groups[value] ?? [] }))
}

const groupedTags: TagGroup[] = groupTags(tagsData)

export function ComboboxGrouped() {
  return (
    <Combobox items={groupedTags}>
      <div className="flex flex-col items-start gap-2">
        <ComboboxInput placeholder="e.g. feature" aria-label="Search tags" />
      </div>
      <ComboboxPopup>
        <ComboboxEmpty>No tags found.</ComboboxEmpty>
        <ComboboxList>
          {(group: TagGroup) => (
            <React.Fragment key={group.value}>
              <ComboboxGroup items={group.items}>
                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>
                <ComboboxCollection>
                  {(tag: Tag) => (
                    <ComboboxItem key={tag.id} value={tag}>
                      {tag.label}
                    </ComboboxItem>
                  )}
                </ComboboxCollection>
              </ComboboxGroup>
              {group.value !== "Team" && <ComboboxSeparator />}
            </React.Fragment>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

With Multiple Selection

Apple

Strawberry

"use client"

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox"

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
]

export function ComboboxMultiple() {
  return (
    <Combobox items={items} multiple defaultValue={[items[0], items[4]]}>
      <ComboboxChips>
        <ComboboxValue>
          {(value: { value: string; label: string }[]) => (
            <>
              {value?.map((item) => (
                <ComboboxChip key={item.value} aria-label={item.label}>
                  {item.label}
                </ComboboxChip>
              ))}
              <ComboboxInput
                placeholder={value.length > 0 ? undefined : "Select a item..."}
                aria-label="Select a item"
              />
            </>
          )}
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

"use client"

import { ChevronsUpDownIcon } from "lucide-react"

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

interface Country {
  code: string
  value: string | null
  continent: string
  label: string
}

const countries: Country[] = [
  { code: "", value: null, continent: "", label: "Select country" },
  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
  { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
  { code: "ao", value: "angola", label: "Angola", continent: "Africa" },
  {
    code: "ar",
    value: "argentina",
    label: "Argentina",
    continent: "South America",
  },
  { code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
  { code: "at", value: "austria", label: "Austria", continent: "Europe" },
  { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
  {
    code: "bs",
    value: "bahamas",
    label: "Bahamas",
    continent: "North America",
  },
  { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
  { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
  {
    code: "bb",
    value: "barbados",
    label: "Barbados",
    continent: "North America",
  },
  { code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
  { code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
  { code: "bz", value: "belize", label: "Belize", continent: "North America" },
  { code: "bj", value: "benin", label: "Benin", continent: "Africa" },
  { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
  {
    code: "bo",
    value: "bolivia",
    label: "Bolivia",
    continent: "South America",
  },
  {
    code: "ba",
    value: "bosnia-and-herzegovina",
    label: "Bosnia and Herzegovina",
    continent: "Europe",
  },
  { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
  { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
  { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
  {
    code: "bf",
    value: "burkina-faso",
    label: "Burkina Faso",
    continent: "Africa",
  },
  { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
  { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
  { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
  { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
  {
    code: "cf",
    value: "central-african-republic",
    label: "Central African Republic",
    continent: "Africa",
  },
  { code: "td", value: "chad", label: "Chad", continent: "Africa" },
  { code: "cl", value: "chile", label: "Chile", continent: "South America" },
  { code: "cn", value: "china", label: "China", continent: "Asia" },
  {
    code: "co",
    value: "colombia",
    label: "Colombia",
    continent: "South America",
  },
  { code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
  { code: "cg", value: "congo", label: "Congo", continent: "Africa" },
  {
    code: "cr",
    value: "costa-rica",
    label: "Costa Rica",
    continent: "North America",
  },
  { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
  { code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
  { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
  {
    code: "cz",
    value: "czech-republic",
    label: "Czech Republic",
    continent: "Europe",
  },
  { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
  { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
  {
    code: "dm",
    value: "dominica",
    label: "Dominica",
    continent: "North America",
  },
  {
    code: "do",
    value: "dominican-republic",
    label: "Dominican Republic",
    continent: "North America",
  },
  {
    code: "ec",
    value: "ecuador",
    label: "Ecuador",
    continent: "South America",
  },
  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
  {
    code: "sv",
    value: "el-salvador",
    label: "El Salvador",
    continent: "North America",
  },
  {
    code: "gq",
    value: "equatorial-guinea",
    label: "Equatorial Guinea",
    continent: "Africa",
  },
  { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
  { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
  { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
  { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
  { code: "fi", value: "finland", label: "Finland", continent: "Europe" },
  { code: "fr", value: "france", label: "France", continent: "Europe" },
  { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
  { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
  { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
  { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
  { code: "gr", value: "greece", label: "Greece", continent: "Europe" },
  {
    code: "gd",
    value: "grenada",
    label: "Grenada",
    continent: "North America",
  },
  {
    code: "gt",
    value: "guatemala",
    label: "Guatemala",
    continent: "North America",
  },
  { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
  {
    code: "gw",
    value: "guinea-bissau",
    label: "Guinea-Bissau",
    continent: "Africa",
  },
  { code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
  { code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
  {
    code: "hn",
    value: "honduras",
    label: "Honduras",
    continent: "North America",
  },
  { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
  { code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
  { code: "in", value: "india", label: "India", continent: "Asia" },
  { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
  { code: "ir", value: "iran", label: "Iran", continent: "Asia" },
  { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
  { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
  { code: "il", value: "israel", label: "Israel", continent: "Asia" },
  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
  {
    code: "jm",
    value: "jamaica",
    label: "Jamaica",
    continent: "North America",
  },
  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
  { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
  { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
  { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
  { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
  { code: "la", value: "laos", label: "Laos", continent: "Asia" },
  { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
  { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
  { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
  { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
  { code: "ly", value: "libya", label: "Libya", continent: "Africa" },
  {
    code: "li",
    value: "liechtenstein",
    label: "Liechtenstein",
    continent: "Europe",
  },
  { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
  { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
  { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
  { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
  { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
  { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
  { code: "ml", value: "mali", label: "Mali", continent: "Africa" },
  { code: "mt", value: "malta", label: "Malta", continent: "Europe" },
  {
    code: "mh",
    value: "marshall-islands",
    label: "Marshall Islands",
    continent: "Oceania",
  },
  { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
  { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
  {
    code: "fm",
    value: "micronesia",
    label: "Micronesia",
    continent: "Oceania",
  },
  { code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
  { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
  { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
  { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
  { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
  { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
  { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
  { code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
  { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
  { code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
  {
    code: "nl",
    value: "netherlands",
    label: "Netherlands",
    continent: "Europe",
  },
  {
    code: "nz",
    value: "new-zealand",
    label: "New Zealand",
    continent: "Oceania",
  },
  {
    code: "ni",
    value: "nicaragua",
    label: "Nicaragua",
    continent: "North America",
  },
  { code: "ne", value: "niger", label: "Niger", continent: "Africa" },
  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
  { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
  {
    code: "mk",
    value: "north-macedonia",
    label: "North Macedonia",
    continent: "Europe",
  },
  { code: "no", value: "norway", label: "Norway", continent: "Europe" },
  { code: "om", value: "oman", label: "Oman", continent: "Asia" },
  { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
  { code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
  { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
  { code: "pa", value: "panama", label: "Panama", continent: "North America" },
  {
    code: "pg",
    value: "papua-new-guinea",
    label: "Papua New Guinea",
    continent: "Oceania",
  },
  {
    code: "py",
    value: "paraguay",
    label: "Paraguay",
    continent: "South America",
  },
  { code: "pe", value: "peru", label: "Peru", continent: "South America" },
  { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
  { code: "pl", value: "poland", label: "Poland", continent: "Europe" },
  { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
  { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
  { code: "ro", value: "romania", label: "Romania", continent: "Europe" },
  { code: "ru", value: "russia", label: "Russia", continent: "Europe" },
  { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
  { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
  { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
  {
    code: "sa",
    value: "saudi-arabia",
    label: "Saudi Arabia",
    continent: "Asia",
  },
  { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
  { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
  { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
  {
    code: "sl",
    value: "sierra-leone",
    label: "Sierra Leone",
    continent: "Africa",
  },
  { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
  { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
  { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
  {
    code: "sb",
    value: "solomon-islands",
    label: "Solomon Islands",
    continent: "Oceania",
  },
  { code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
  {
    code: "za",
    value: "south-africa",
    label: "South Africa",
    continent: "Africa",
  },
  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
  {
    code: "ss",
    value: "south-sudan",
    label: "South Sudan",
    continent: "Africa",
  },
  { code: "es", value: "spain", label: "Spain", continent: "Europe" },
  { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
  { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
  {
    code: "sr",
    value: "suriname",
    label: "Suriname",
    continent: "South America",
  },
  { code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
  {
    code: "ch",
    value: "switzerland",
    label: "Switzerland",
    continent: "Europe",
  },
  { code: "sy", value: "syria", label: "Syria", continent: "Asia" },
  { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
  { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
  { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
  { code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
  { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
  { code: "tg", value: "togo", label: "Togo", continent: "Africa" },
  { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
  {
    code: "tt",
    value: "trinidad-and-tobago",
    label: "Trinidad and Tobago",
    continent: "North America",
  },
  { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
  { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
  {
    code: "tm",
    value: "turkmenistan",
    label: "Turkmenistan",
    continent: "Asia",
  },
  { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
  { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
  { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
  {
    code: "ae",
    value: "united-arab-emirates",
    label: "United Arab Emirates",
    continent: "Asia",
  },
  {
    code: "gb",
    value: "united-kingdom",
    label: "United Kingdom",
    continent: "Europe",
  },
  {
    code: "us",
    value: "united-states",
    label: "United States",
    continent: "North America",
  },
  {
    code: "uy",
    value: "uruguay",
    label: "Uruguay",
    continent: "South America",
  },
  { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
  { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
  {
    code: "va",
    value: "vatican-city",
    label: "Vatican City",
    continent: "Europe",
  },
  {
    code: "ve",
    value: "venezuela",
    label: "Venezuela",
    continent: "South America",
  },
  { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
  { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
  { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
  { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
]

export function ComboboxWithInnerInput() {
  return (
    <Combobox items={countries} defaultValue={countries[0]}>
      <ComboboxTrigger
        render={
          <Button
            variant="outline"
            className="w-full justify-between font-normal"
          />
        }
      >
        <ComboboxValue />
        <div className="flex">
          <ChevronsUpDownIcon className="-me-1 size-4 opacity-72" />
        </div>
      </ComboboxTrigger>
      <ComboboxPopup aria-label="Select country">
        <div className="border-b p-2">
          <ComboboxInput
            className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
            placeholder="e.g. United Kingdom"
            showTrigger={false}
          />
        </div>
        <ComboboxEmpty>No countries found.</ComboboxEmpty>
        <ComboboxList>
          {(country: Country) => (
            <ComboboxItem key={country.code} value={country}>
              {country.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  )
}

Form Integration

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  { value: "strawberry", label: "Strawberry" },
  { value: "mango", label: "Mango" },
  { value: "pineapple", label: "Pineapple" },
  { value: "kiwi", label: "Kiwi" },
  { value: "peach", label: "Peach" },
  { value: "pear", label: "Pear" },
]

export function ComboboxForm() {
  const [loading, setLoading] = React.useState(false)
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const selectedItem = formData.get("item")
    const itemValue =
      items.find((item) => item.label === selectedItem)?.value || selectedItem
    setLoading(true)
    await new Promise((r) => setTimeout(r, 800))
    setLoading(false)
    alert(`Favorite item: ${itemValue || ""}`)
  }

  return (
    <Form onSubmit={onSubmit} className="max-w-64">
      <Field>
        <FieldLabel>Favorite item</FieldLabel>
        <Combobox items={items} name="item" disabled={loading} required>
          <ComboboxInput placeholder="Select an item..." />
          <ComboboxPopup>
            <ComboboxEmpty>No results found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item.value} value={item}>
                  {item.label}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxPopup>
        </Combobox>
        <FieldError>Please select a item.</FieldError>
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}

Form Integration - Multiple

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
]

export function ComboboxMultipleForm() {
  const [loading, setLoading] = React.useState(false)
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const selectedItems = formData.getAll("items")
    const itemValues = selectedItems.map(
      (selectedItem) =>
        items.find((item) => item.label === selectedItem)?.value || selectedItem
    )
    setLoading(true)
    await new Promise((r) => setTimeout(r, 800))
    setLoading(false)
    alert(`Favorite items: ${itemValues.join(", ") || ""}`)
  }

  return (
    <Form onSubmit={onSubmit} className="max-w-64">
      <Field>
        <FieldLabel>Favorite items</FieldLabel>
        <Combobox
          items={items}
          multiple
          name="items"
          disabled={loading}
          required
        >
          <ComboboxChips>
            <ComboboxValue>
              {(value: { value: string; label: string }[]) => (
                <>
                  {value?.map((item) => (
                    <ComboboxChip key={item.value} aria-label={item.label}>
                      {item.label}
                    </ComboboxChip>
                  ))}
                  <ComboboxInput
                    placeholder={value.length > 0 ? undefined : "Select items…"}
                  />
                </>
              )}
            </ComboboxValue>
          </ComboboxChips>
          <ComboboxPopup>
            <ComboboxEmpty>No items found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item.value} value={item}>
                  {item.label}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxPopup>
        </Combobox>
        <FieldError>Please select at least one item.</FieldError>
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}

Collapsible Dialog

On This Page

Installation Usage Single Selection Multiple Selection API Reference Examples Disabled Small Size Large Size With Label Auto Highlight With Clear Button With Groups With Multiple Selection With Input Inside Popup Form Integration Form Integration - Multiple