Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Combobox
description: Autocomplete input with a list of suggestions.
sidebar:
  badge:
    text: ⋅
    variant: success
---

```astro live props={{ name: 'combobox' }}
---
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
---

<Combobox class="w-full max-w-sm">
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

## Installation

```bash
npx shadcn@latest add @fulldev/combobox
```

## Usage

```ts
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox"
```

```astro
<Combobox class="w-full max-w-sm">
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

## Composition

Use this composition for a single-line input and a flat list:

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

Use `ComboboxGroup`, `ComboboxLabel`, and `ComboboxSeparator` to organize items:

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

Use `ComboboxTrigger` and `ComboboxValue` when composing a custom trigger. Use `showClear` on `ComboboxInput` when the input needs a clear control.

## Examples

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

<Combobox
  class="relative w-full max-w-sm"
  placeholder="Choose a timezone..."
  defaultValue="cet"
>
  <ComboboxInput showClear />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No timezones found.</ComboboxEmpty>
      <ComboboxItem value="cet">Central European Time</ComboboxItem>
      <ComboboxItem value="est">Eastern Standard Time</ComboboxItem>
      <ComboboxItem value="pst">Pacific Standard Time</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

```astro live
---
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
} from "@/components/ui/combobox"
---

<Combobox class="w-full max-w-sm" placeholder="Search technologies...">
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxLabel>Frontend</ComboboxLabel>
        <ComboboxItem value="astro">Astro</ComboboxItem>
        <ComboboxItem value="nextjs">Next.js</ComboboxItem>
        <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      </ComboboxGroup>
      <ComboboxSeparator />
      <ComboboxGroup>
        <ComboboxLabel>Backend</ComboboxLabel>
        <ComboboxItem value="express">Express</ComboboxItem>
        <ComboboxItem value="fastify">Fastify</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

### Auto Highlight

Use `autoHighlight` to automatically highlight the first visible item after a
non-whitespace query.

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

<Combobox
  class="w-full max-w-sm"
  placeholder="Search frameworks..."
  autoHighlight
>
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

### Combobox in Popup

Trigger the combobox from a button and move the search input inside the popup.

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

<Combobox class="w-full max-w-sm" defaultValue="astro">
  <ComboboxTrigger
    class="border-input bg-background dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3"
  >
    <ComboboxValue>Select a framework...</ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput showTrigger={false} placeholder="Search frameworks..." />
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

### Disabled

Use `disabled` on `Combobox` to disable interaction.

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

<Combobox class="w-full max-w-sm" placeholder="Select a framework" disabled>
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/combobox) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/combobox/README.md) for more information on interactivity.