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

# Combobox Component

Combobox combine une saisie de texte avec une liste déroulante. Utilisez le composant `input` pour le champ : les variantes de taille, de couleur et d'état proviennent de là. Les utilitaires `combobox-*` gèrent uniquement la liste déroulante, les éléments et l'état ouvert.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe             | Taper        | Description                                                        |
| ------------------ | ------------ | ------------------------------------------------------------------ |
| combobox-list      | Base         | Conteneur de liste déroulante pour les options de liste déroulante |
| combobox-item      | Modificateur | Option individuelle dans la liste déroulante                       |
| combobox-open      | Modificateur | Affiche la liste déroulante lorsqu'elle est appliquée au wrapper   |
| combobox-primary   | Couleur      | Primary theme color highlight for items                            |
| combobox-secondary | Couleur      | Secondary theme color highlight for items                          |
| combobox-accent    | Couleur      | Accent theme color highlight for items                             |
| combobox-info      | Couleur      | Info semantic color highlight                                      |
| combobox-success   | Couleur      | Success semantic color highlight                                   |
| combobox-warning   | Couleur      | Warning semantic color highlight                                   |
| combobox-error     | Couleur      | Error semantic color highlight                                     |

## Utilisation de base

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

## Aide JS et React

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.