# Combobox: Multiple

> With `multiple`, selections become chips inside `<ComboboxChips />`. The popup stays open while you pick, Backspace in the empty input removes the last chip, and the arrow keys move between chips.

Example: https://hextaui.com/docs/combobox/examples/multiple
Component docs: https://hextaui.com/docs/combobox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/combobox-multiple.json
```

This adds `components/examples/combobox/multiple.tsx` with the Combobox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/combobox/multiple.tsx"
"use client"

import type * as React from "react"
import {
  IconBrandAngular,
  IconBrandNextjs,
  IconBrandReact,
  IconBrandSvelte,
  IconBrandVue,
} from "@tabler/icons-react"

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
} from "@/components/ui/combobox"
import { Label } from "@/components/ui/label"

type Framework = {
  value: string
  label: string
  icon: React.ComponentType<{ className?: string }>
}

const frameworks: Framework[] = [
  { value: "next", label: "Next.js", icon: IconBrandNextjs },
  { value: "react", label: "React", icon: IconBrandReact },
  { value: "vue", label: "Vue", icon: IconBrandVue },
  { value: "svelte", label: "Svelte", icon: IconBrandSvelte },
  { value: "angular", label: "Angular", icon: IconBrandAngular },
]

export function ComboboxMultiple() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="combobox-multiple">Frameworks</Label>
      <Combobox
        items={frameworks}
        multiple
        autoHighlight
        defaultValue={[frameworks[0], frameworks[1]]}
      >
        <ComboboxChips>
          <ComboboxValue>
            {(values: Framework[]) => (
              <>
                {values.map((value) => (
                  <ComboboxChip key={value.value}>{value.label}</ComboboxChip>
                ))}
                <ComboboxChipsInput
                  id="combobox-multiple"
                  placeholder={values.length > 0 ? "" : "Add frameworks"}
                />
              </>
            )}
          </ComboboxValue>
        </ComboboxChips>
        <ComboboxContent>
          <ComboboxEmpty>No framework found.</ComboboxEmpty>
          <ComboboxList>
            {(item: Framework) => (
              <ComboboxItem key={item.value} value={item}>
                <item.icon />
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}
```

## Props in this example

### Combobox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Item[] \| Group[]` | – | The options. Filtered as you type and passed to the list’s render function. |
| `multiple` | `boolean` | `false` | Select several values, shown as chips. |
| `defaultValue` | `Value \| Value[] \| null` | – |  |
| `autoHighlight` | `boolean` | `false` | Highlight the first match while typing. |

### ComboboxItem

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

## More Combobox examples

- [Clear button](https://hextaui.com/docs/combobox/examples/clear.md)
- [With icons](https://hextaui.com/docs/combobox/examples/icons.md)
- [Groups and separators](https://hextaui.com/docs/combobox/examples/groups.md)
- [Search inside the popup](https://hextaui.com/docs/combobox/examples/popup-search.md)
- [Trigger rendered as a Button](https://hextaui.com/docs/combobox/examples/button-trigger.md)
- [Controlled](https://hextaui.com/docs/combobox/examples/controlled.md)
- [Disabled, invalid and disabled items](https://hextaui.com/docs/combobox/examples/states.md)
- [Long content and large lists](https://hextaui.com/docs/combobox/examples/long-content.md)
- [Async search](https://hextaui.com/docs/combobox/examples/async.md)
- [Inside a sheet](https://hextaui.com/docs/combobox/examples/sheet.md)
- [Right to left](https://hextaui.com/docs/combobox/examples/rtl.md)