---
title: "Combobox"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
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/components/combobox
---

# Combobox Component

 Combobox combines a text input with a dropdown list. Use the `input` component for the field — size, color, and state variants come from there. The `combobox-*` utilities handle only the dropdown list, items, and open state.

| Class              | Type     | Description                                         |
| ------------------ | -------- | --------------------------------------------------- |
| combobox-list      | Base     | Dropdown list container for combobox options        |
| combobox-item      | Modifier | Individual option inside the dropdown list          |
| combobox-open      | Modifier | Shows the dropdown list when applied to the wrapper |
| combobox-primary   | Color    | Primary theme color highlight for items             |
| combobox-secondary | Color    | Secondary theme color highlight for items           |
| combobox-accent    | Color    | Accent theme color highlight for items              |
| combobox-info      | Color    | Info semantic color highlight                       |
| combobox-success   | Color    | Success semantic color highlight                    |
| combobox-warning   | Color    | Warning semantic color highlight                    |
| combobox-error     | Color    | Error semantic color highlight                      |

## Basic Usage

Wrap an `input` and a `combobox-list` in a `relative` container. Add `combobox-open` to the wrapper to show the list — toggle it via JS or `:focus-within`.

## Open on Focus

Use `focus-within:combobox-open` on the wrapper to open the list when the input is focused — no JavaScript needed.

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


## Sizes

Use `input-sm`, `input-lg`, etc. on the input field. The dropdown adapts naturally.

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


## Colors

Use `input-primary` etc. on the input for the field color. Add the matching `combobox-primary` to the wrapper to tint the active item highlight.

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


## Disabled

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


## With Button

Compose with `join` to attach a search icon or trigger button.

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


## Items as Links or Buttons

`combobox-item` works on any element — `<li>`, `<a>`, or `<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 & React Helper

Use `createCombobox` from `frutjam/js` or `useCombobox` from `frutjam/react` to get filtering, keyboard navigation (↑ ↓ Enter Escape), and full `aria-*` wiring out of the box. Listen for the `fj:select` event to handle selection.