---
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/id/components/combobox
---

# Combobox Component

Combobox menggabungkan input teks dengan daftar dropdown. Gunakan komponen `input` untuk kolom — varian ukuran, warna, dan status berasal dari sana. Utilitas `combobox-*` hanya menangani daftar dropdown, item, dan status terbuka.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas              | Jenis    | Keterangan                                                |
| ------------------ | -------- | --------------------------------------------------------- |
| combobox-list      | Basis    | Wadah daftar tarik-turun untuk opsi kotak kombo           |
| combobox-item      | Pengubah | Opsi individual di dalam daftar dropdown                  |
| combobox-open      | Pengubah | Menampilkan daftar dropdown saat diterapkan ke pembungkus |
| combobox-primary   | Warna    | Sorotan warna tema utama untuk item                       |
| combobox-secondary | Warna    | Sorotan warna tema sekunder untuk item                    |
| combobox-accent    | Warna    | Sorotan warna tema aksen untuk item                       |
| combobox-info      | Warna    | Info sorotan warna semantik                               |
| combobox-success   | Warna    | Sorotan warna semantik sukses                             |
| combobox-warning   | Warna    | Sorotan warna semantik peringatan                         |
| combobox-error     | Warna    | Kesalahan sorotan warna semantik                          |

## Penggunaan Dasar

Bungkus `input` dan `combobox-list` dalam wadah `relatif`. Tambahkan `combobox-open` ke pembungkus untuk menampilkan daftar — alihkan melalui JS atau `:focus-within`.

## Buka pada Fokus

Gunakan `focus-within:combobox-open` pada wrapper untuk membuka daftar ketika input terfokus — tidak diperlukan JavaScript.

```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>
```

## Ukuran

Gunakan `input-sm`, `input-lg`, dll. pada kolom input. Dropdown beradaptasi secara alami.

```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>
```

## Warna

Gunakan `input-primary` dll. pada input untuk warna bidang. Tambahkan `combobox-primary` yang cocok ke pembungkus untuk mewarnai sorotan item aktif.

```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>
```

## Dengan disabilitas

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

## Dengan Tombol

Tulis dengan `join` untuk melampirkan ikon pencarian atau tombol pemicu.

```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>
```

## Item sebagai Tautan atau Tombol

`combobox-item` berfungsi pada elemen apa pun — `<li>`, `<a>`, atau `<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 & Pembantu React

Gunakan `createCombobox` dari `frutjam/js` atau `useCombobox` dari `frutjam/react` untuk mendapatkan pemfilteran, navigasi keyboard (↑ ↓ Enter Escape), dan wiring `aria-*` lengkap. Dengarkan event `fj:select` untuk menangani seleksi.