---
title: Combobox
description: Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

link:
  doc: https://kobalte.dev/docs/core/components/combobox
  api: https://kobalte.dev/docs/core/components/combobox#api-reference
---

<ComponentPreview name="combobox-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/combobox-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

<Step>

<StepItem>Copy and paste the following code into your project:</StepItem>

  <ComponentSourceTabs>

    ```tsx title="components/ui/combobox" file=<rootDir>/apps/docs/src/registry/ui/combobox.tsx

    ```

    ```tsx title="components/ui/combobox" file=<rootDir>/apps/unocss-playground/src/registry/ui/combobox.tsx

    ```

  </ComponentSourceTabs>

</Step>

</ComponentInstallation>

## Usage

```tsx
import { createSignal } from "solid-js"
import { createFilter } from "@kobalte/core"

import {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxTrigger,
} from "@/components/ui/combobox"
```

```tsx
const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]

const filter = createFilter({ sensitivity: "base" })
const [options, setOptions] = createSignal(ALL_OPTIONS)
const onInputChange = (value: string) => {
  setOptions(ALL_OPTIONS.filter((option) => filter.contains(option, value)))
}
```

```tsx
<Combobox
  options={options()}
  onInputChange={onInputChange}
  itemComponent={(props) => (
    <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
  )}
>
  <ComboboxTrigger>
    <ComboboxInput />
  </ComboboxTrigger>
  <ComboboxContent />
</Combobox>
```

## Examples

### Disabled

<ComponentPreview name="combobox-disabled-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/combobox-disabled-demo.tsx

```

</ComponentPreview>

### Error

<ComponentPreview name="combobox-error-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/combobox-error-demo.tsx

```

</ComponentPreview>

### Group

<ComponentPreview name="combobox-group-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/combobox-group-demo.tsx

```

</ComponentPreview>

### Multi

<ComponentPreview name="combobox-multi-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/combobox-multi-demo.tsx

```

</ComponentPreview>
