AG Design System

Component

Combobox

Autocomplete input with a filterable list of suggestions. Combines typeahead search with single-select or multiselect dropdown behavior.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/combobox

Usage

Use a combobox when users benefit from searching a list of options. Enable multiselect to let users pick several options, shown as removable chips. For short fixed lists, consider Select or radio buttons.

Composition

ButtonInput

Playground

Preview

Configure

Yes
No

Allow selecting multiple options, shown as removable chips.

No

Shows an X button to clear the selection. Only visible when a value is selected.

No

Code

"use client"

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js"]

export function FrameworkCombobox() {
  return (
    <div className="grid w-full max-w-sm gap-1.5">
      <Label htmlFor="framework">Framework</Label>
      <Combobox items={frameworks}>
        <ComboboxInput
          id="framework"
          placeholder="Select a framework…"
        />
        <ComboboxContent>
          <ComboboxEmpty>No items found.</ComboboxEmpty>
          <ComboboxList>
            {(item) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}

Variants & States

Supported variants, sizes, and interaction states for this component.

States

  • Placeholder
  • With value
  • Disabled

Do

  • Use when the list is long enough to benefit from typeahead filtering
  • Show an empty state when no options match the query
  • Keep option labels short and scannable

Don't

  • Don't use a combobox for fewer than ~5 static options, use Select instead
  • Don't hide critical choices behind ambiguous placeholder text