# Combobox: Disabled, invalid and disabled items

> `disabled` on the root dims the field and its buttons. `aria-invalid` on the input draws the error ring. Disabled items are skipped by the arrow keys.

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

## Add this example

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

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

## Source

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

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

const fruits = [
  "Apple",
  "Apricot",
  "Banana",
  "Blackberry",
  "Blueberry",
  "Cherry",
  "Grape",
  "Grapefruit",
  "Kiwi",
  "Lychee",
  "Mango",
  "Orange",
  "Papaya",
  "Peach",
  "Pear",
  "Pineapple",
  "Plum",
  "Raspberry",
  "Strawberry",
  "Watermelon",
]

export function ComboboxStates() {
  return (
    <div className="grid w-full max-w-xl gap-6 sm:grid-cols-2">
      <div className="flex flex-col gap-2">
        <Label htmlFor="combobox-disabled">Disabled</Label>
        <Combobox items={fruits} disabled defaultValue="Apple">
          <ComboboxInput id="combobox-disabled" showClear />
          <ComboboxContent>
            <ComboboxList>
              {(item: string) => (
                <ComboboxItem key={item} value={item}>
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="combobox-invalid">Invalid</Label>
        <Combobox items={fruits}>
          <ComboboxInput
            id="combobox-invalid"
            aria-invalid
            placeholder="Required"
          />
          <ComboboxContent>
            <ComboboxList>
              {(item: string) => (
                <ComboboxItem
                  key={item}
                  value={item}
                  disabled={item.startsWith("B")}
                >
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
        <p className="text-sm text-muted-foreground">
          Items starting with B are disabled.
        </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` | – |  |
| `disabled` | `boolean` | `false` |  |

### 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. |
| `disabled` | `boolean` | `false` |  |

## 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)
- [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)