---
title: "Combobox"
description: "Yazarak daraltılan seçim listesi. Tek seçim ya da etiketli çoklu seçim; Base UI üzerine kurulu."
---

<Callout type="info" title="Ne zaman kullanılır">
Seçenek sayısı Select'e sığmayacak kadar çoksa: kategori, marka, ülke, etiket. On seçeneğin altında [Select](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/form) daha sade kalır.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/combobox
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. shadcn/ui'deki gibi [Base UI](https://base-ui.com/react/components/combobox) Combobox'ını kullanır; Root prop'larının hepsi çalışır (items, value, onValueChange, multiple, autoHighlight).

## Örnekler

### Tek seçim

items verin, ComboboxList her öğeyi render prop ile çizer. showClear seçili değeri temizleyen butonu ekler.

**Örnek: Tek seçim** (`combobox/basic`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/combobox/basic)

```tsx
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"

const categories = [
  "Aksesuar",
  "Ayakkabı",
  "Çanta",
  "Elbise",
  "Gömlek",
  "Kazak",
  "Mont",
  "Pantolon",
  "Şapka",
  "Tişört",
]

export default function ComboboxBasic() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="category">Kategori</FieldLabel>
      <Combobox items={categories} defaultValue="Tişört">
        <ComboboxInput id="category" placeholder="Kategori ara" showClear />
        <ComboboxContent>
          <ComboboxEmpty>Kategori bulunamadı.</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <FieldDescription>Yazarak listeyi daraltın.</FieldDescription>
    </Field>
  )
}
```

### Çoklu seçim

multiple ile seçimler ComboboxChips içinde etiket olur. useComboboxAnchor'dan gelen ref'i hem ComboboxChips'e hem ComboboxContent anchor'ına verin ki liste alanla aynı genişlikte açılsın.

**Örnek: Çoklu seçim** (`combobox/multiple`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/combobox/multiple)

```tsx
import * as React from "react"

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
  useComboboxAnchor,
} from "@/components/ui/combobox"
import { Field, FieldLabel } from "@/components/ui/field"

const tags = ["Yeni sezon", "İndirimde", "Çok satan", "Sınırlı stok", "Hediye paketi", "Ücretsiz kargo", "Ön sipariş"]

export default function ComboboxMultiple() {
  const anchor = useComboboxAnchor()

  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Ürün etiketleri</FieldLabel>
      <Combobox multiple autoHighlight items={tags} defaultValue={["Yeni sezon", "Çok satan"]}>
        <ComboboxChips ref={anchor}>
          <ComboboxValue>
            {(values: string[]) => (
              <React.Fragment>
                {values.map((value) => (
                  <ComboboxChip key={value}>{value}</ComboboxChip>
                ))}
                <ComboboxChipsInput placeholder={values.length ? "" : "Etiket ekle"} aria-label="Etiket ara" />
              </React.Fragment>
            )}
          </ComboboxValue>
        </ComboboxChips>
        <ComboboxContent anchor={anchor}>
          <ComboboxEmpty>Etiket bulunamadı.</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </Field>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- ComboboxEmpty ile sonuç yok mesajı verin.
- Uzun listeleri ComboboxGroup ve ComboboxLabel ile gruplayın.

**Yapmayın:**

- Serbest metin girişi için kullanmayın; listede olmayan değeri kabul etmez.
- Beşten az seçenek için kullanmayın; RadioGroup veya Segmented Control daha hızlıdır.

## API

### `ComboboxInput`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `showTrigger` | `boolean` | `true` | Listeyi açan ok butonu. |
| `showClear` | `boolean` | `false` | Değer seçiliyken temizleme butonu. |

### `ComboboxChip`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `showRemove` | `boolean` | `true` | Etiketi kaldıran küçük x butonu. |