# Combobox: Long content and large lists

> Long and unbroken labels wrap instead of widening the popup. `limit` caps how many matches render, which keeps a 500 item list fast.

Example: https://hextaui.com/docs/combobox/examples/long-content
Component docs: https://hextaui.com/docs/combobox.md

## Add this example

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

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

## Source

```tsx title="components/examples/combobox/long-content.tsx"
"use client"

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

const longItems = [
  "A very long option label that wraps onto a second line instead of pushing the popup wider than its input",
  "supercalifragilisticexpialidocious-unbroken-string-without-any-spaces-at-all-anywhere",
  "olivia.martin+newsletter-subscriptions@a-very-long-company-domain.example.com",
  "👩‍👩‍👧‍👦 Family 🧑🏽‍💻 Developer 🏳️‍🌈",
  "東京都千代田区丸の内一丁目",
  "",
  "Short",
]

const manyItems = Array.from({ length: 500 }, (_, index) => `Item ${index + 1}`)

export function ComboboxLongContent() {
  return (
    <div className="grid w-full max-w-xl gap-6 sm:grid-cols-2">
      <div className="flex w-full max-w-60 flex-col gap-2">
        <Label htmlFor="combobox-long">Long labels</Label>
        <Combobox items={longItems} defaultValue={longItems[1]}>
          <ComboboxInput id="combobox-long" placeholder="Pick one" showClear />
          <ComboboxContent>
            <ComboboxEmpty>
              Nothing matches this unusually long query, try something else.
            </ComboboxEmpty>
            <ComboboxList>
              {(item: string) => (
                <ComboboxItem key={item} value={item}>
                  {item || "(empty)"}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="combobox-many">500 items</Label>
        <Combobox items={manyItems} limit={100}>
          <ComboboxInput id="combobox-many" placeholder="Search items" />
          <ComboboxContent>
            <ComboboxEmpty>No item found.</ComboboxEmpty>
            <ComboboxList>
              {(item: string) => (
                <ComboboxItem key={item} value={item}>
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
        <p className="text-sm text-muted-foreground">
          Shows the first 100 matches.
        </p>
      </div>
    </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. |
| `defaultValue` | `Value \| Value[] \| null` | – |  |
| `limit` | `number` | `-1` | Maximum number of matches to render. -1 means all. |

### ComboboxInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showClear` | `boolean` | `false` | Show a clear button in the chevron’s place while there is a value. |
| `placeholder` | `string` | – |  |

### 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)
- [Multiple](https://hextaui.com/docs/combobox/examples/multiple.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)
- [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)