---
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/zh-hant/components/combobox
---

# Combobox Component

組合方塊將文字輸入與下拉清單組合在一起。使用欄位的輸入組件 - 大小、顏色和狀態變體都來自那裡。 `combobox-*` 實用程式僅處理下拉清單、項目和開啟狀態。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                 | 類型  | 描述            |
| ------------------ | --- | ------------- |
| combobox-list      | 根據  | 組合方塊選項的下拉清單容器 |
| combobox-item      | 修飾符 | 下拉清單中的單一選項    |
| combobox-open      | 修飾符 | 應用於包裝器時顯示下拉列表 |
| combobox-primary   | 顏色  | 項目的主要主題顏色突出顯示 |
| combobox-secondary | 顏色  | 項目的次要主題顏色突出顯示 |
| combobox-accent    | 顏色  | 項目的強調主題顏色突出顯示 |
| combobox-info      | 顏色  | 訊息語意顏色高亮      |
| combobox-success   | 顏色  | 成功語意色彩高亮      |
| combobox-warning   | 顏色  | 警告語意顏色突出顯示    |
| combobox-error     | 顏色  | 錯誤語意顏色突出顯示    |

## 基本用法

將 `input` 和 `combobox-list` 包裝在 `relative` 容器中。將 `combobox-open` 添加到包裝器以顯示列表 - 透過 JS 或 `:focus-within` 切換它。

## 焦點打開

當輸入獲得焦點時，在包裝器上使用 `focus-within:combobox-open` 開啟清單 - 無需 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>
```

## 尺寸

在輸入欄位上使用 `input-sm`、`input-lg` 等。下拉式選單會自然適應。

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

## 顏色

在欄位顏色的輸入上使用 `input-primary` 等。將符合的 `combobox-primary` 新增到包裝器中，​​以對活動項目反白進行著色。

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

## 殘障人士

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

## 帶按鈕

使用 `join` 撰寫以附加搜尋圖示或觸發按鈕。

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

## 作為連結或按鈕的項目

`combobox-item` 適用於任何元素 - `- 、 或 。

```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 和 React 助手

    使用 frutjam/js 中的 createCombobox 或 frutjam/eact 中的 useCombobox 來獲得過濾、鍵盤導航（↑ ↓ 輸入 Escape）以及開箱即用的完整 aria-* 接線。監聽 fj:select 事件來處理選擇。

`