---
title: "Combobox"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Combobox with searchable dropdown and autocomplete support. Keyboard-accessible filtering and custom options for advanced form controls."
url: https://frutjam.com/tr/components/combobox
---

# Combobox Component

Combobox, bir metin girişini bir açılır listeyle birleştirir. Alan için `input` bileşenini kullanın; boyut, renk ve durum değişkenleri buradan gelir. `combobox-*` yardımcı programları yalnızca açılır listeyi, öğeleri ve açık durumu yönetir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf              | Tip         | Tanım                                                           |
| ------------------ | ----------- | --------------------------------------------------------------- |
| combobox-list      | Temel       | Birleşik giriş kutusu seçenekleri için açılır liste kapsayıcısı |
| combobox-item      | Değiştirici | Açılır listedeki bireysel seçenek                               |
| combobox-open      | Değiştirici | Paketleyiciye uygulandığında açılır listeyi gösterir            |
| combobox-primary   | Renk        | Öğeler için birincil tema rengi vurgusu                         |
| combobox-secondary | Renk        | Öğeler için ikincil tema rengi vurgusu                          |
| combobox-accent    | Renk        | Öğeler için vurgulu tema rengi vurgusu                          |
| combobox-info      | Renk        | Bilgi anlamsal renk vurgusu                                     |
| combobox-success   | Renk        | Başarı anlamsal renk vurgusu                                    |
| combobox-warning   | Renk        | Uyarı anlamsal renk vurgusu                                     |
| combobox-error     | Renk        | Anlamsal renk vurgulama hatası                                  |

## Temel Kullanım

Bir `giriş` ve bir `combobox-list`'i `göreli` kapsayıcıya sarın. Listeyi göstermek için sarıcıya `combobox-open` ekleyin; JS veya `:focus-with` aracılığıyla değiştirin.

## Odaklandığında Aç

Giriş odaklandığında listeyi açmak için sarmalayıcıda `focus-within:combobox-open` komutunu kullanın; JavaScript gerekmez.

```html
<div class="relative w-64 focus-within:combobox-open">
  <input type="text" class="input w-full" placeholder="Focus to open...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>
```

## Boyutlar

Giriş alanında `input-sm`, `input-lg` vb.'yi kullanın. Açılır menü doğal olarak uyum sağlar.

```html
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-sm w-full" placeholder="Small">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-lg w-full" placeholder="Large">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>
```

## Renkler

Alan renginin girişinde `input-primary` vb. kullanın. Etkin öğe vurgusunu renklendirmek için eşleşen `combobox-primary`'i sarmalayıcıya ekleyin.

```html
<div class="relative w-64 combobox-open combobox-primary">
  <input type="text" class="input input-primary w-full" placeholder="Primary">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>
<div class="relative w-64 combobox-open combobox-error">
  <input type="text" class="input input-error w-full" placeholder="Error">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>
```

## Engelli

```html
<div class="relative w-64">
  <input type="text" class="input w-full" placeholder="Disabled" disabled>
</div>
```

## Düğmeli

Bir arama simgesi veya tetikleme düğmesi eklemek için `join` ile oluşturun.

```html
<div class="relative w-64 combobox-open">
  <div class="join w-full">
    <span class="join-item btn btn-soft">🔍</span>
    <input type="text" class="input join-item" placeholder="Search...">
  </div>
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>
```

## Bağlantı veya Düğme Olarak Öğeler

`combobox-item` herhangi bir öğe üzerinde çalışır — `<li>`, `<a>` veya `<button>`.

```html
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search pages...">
  <ul class="combobox-list">
    <a href="#" class="combobox-item">Home</a>
    <a href="#" class="combobox-item combobox-item-active">About</a>
    <button class="combobox-item">Contact</button>
  </ul>
</div>
```

## JS ve Tepki Yardımcısı

Filtreleme, klavye navigasyonu (↑ ↓ Enter Escape) ve tam `aria-*` kablolamayı kutudan çıkarmak için `frutjam/js`'den `createCombobox`'u veya `frutjam/react`'tan `useCombobox`'u kullanın. Seçimi işlemek için `fj:select` olayını dinleyin.