---
title: "cuadro combinado"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Combobox con menú desplegable con capacidad de búsqueda y soporte de autocompletar. Filtrado accesible por teclado y opciones personalizadas para controles de formulario avanzados."
url: https://frutjam.com/es/components/combobox
---

# Componente de cuadro combinado

Combobox combina una entrada de texto con una lista desplegable. Utilice el componente `input` para el campo: las variantes de tamaño, color y estado provienen de allí. Las utilidades `combobox-*` manejan solo la lista desplegable, los elementos y el estado abierto.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

| Clase              | Tipo        | Descripción                                                       |
| ------------------ | ----------- | ----------------------------------------------------------------- |
| combobox-list      | Base        | Contenedor de lista desplegable para opciones de cuadro combinado |
| combobox-item      | Modificador | Opción individual dentro de la lista desplegable                  |
| combobox-open      | Modificador | Muestra la lista desplegable cuando se aplica al contenedor       |
| combobox-primary   | Color       | Resaltado de color del tema principal para elementos              |
| combobox-secondary | Color       | Resaltado de color del tema secundario para elementos             |
| combobox-accent    | Color       | Resaltado de color del tema de acento para artículos              |
| combobox-info      | Color       | Resaltado de color semántico de información                       |
| combobox-success   | Color       | Resaltado de color semántico de éxito                             |
| combobox-warning   | Color       | Resaltado de color semántico de advertencia                       |
| combobox-error     | Color       | Resaltado de color semántico de error                             |

## Uso básico

Envuelva una `input` y una `combobox-list` en un contenedor `relative`. Agregue `combobox-open` al contenedor para mostrar la lista; alterne mediante JS o `:focus-within`.

## Abrir en foco

Utilice `focus-within:combobox-open` en el contenedor para abrir la lista cuando la entrada esté enfocada; no se necesita 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>
```

## Tallas

Utilice `input-sm`, `input-lg`, etc. en el campo de entrada. El menú desplegable se adapta de forma natural.

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

## Bandera

Utilice `input-primary`, etc. en la entrada para el color del campo. Agregue el `combobox-primary` coincidente al contenedor para teñir el resaltado del elemento activo.

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

## Desactivado

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

## Con botón

Redacte con `join` para adjuntar un icono de búsqueda o un botón de activación.

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

## Elementos como enlaces o botones

`combobox-item` funciona en cualquier elemento: `<li>`, `<a>` o `<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>
```

## Ayudante de JS y React

Utilice `createCombobox` de `frutjam/js` o `useCombobox` de `frutjam/react` para obtener filtrado, navegación con el teclado ( ↑ ↓ Enter Escape) y cableado `aria-*` completo listo para usar. Escuche el evento `fj:select` para manejar la selección.