# Combo Box (/forms/combo-box)





<ComponentPreview name="combo-box-preskok-demo" description="Combo box with list and sections." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/combo-box
```

## Usage [#usage]

```tsx
import { ComboBox } from "@/components/ui/preskok-ui/combo-box"

type City = { id: string; name: string }
const cities: City[] = [
  { id: "nyc", name: "New York" },
  { id: "ldn", name: "London" },
  { id: "tko", name: "Tokyo" },
]

export function ComboBoxDemo() {
  return (
    <ComboBox label="City">
      <ComboBox.Input placeholder="Search cities" />
      <ComboBox.List items={cities}>
        {(item: City) => (
          <ComboBox.Option id={item.id} textValue={item.name}>
            {item.name}
          </ComboBox.Option>
        )}
      </ComboBox.List>
    </ComboBox>
  )
}
```