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

# Combobox Component

Combobox łączy wprowadzanie tekstu z listą rozwijaną. Użyj komponentu `input` dla pola — stamtąd pochodzą warianty rozmiaru, koloru i stanu. Narzędzia `combobox-*` obsługują tylko listę rozwijaną, elementy i stan otwarty.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa              | Typ         | Opis                                                   |
| ------------------ | ----------- | ------------------------------------------------------ |
| combobox-list      | Opierać     | Kontener listy rozwijanej dla opcji combobox           |
| combobox-item      | Modyfikator | Indywidualna opcja na liście rozwijanej                |
| combobox-open      | Modyfikator | Pokazuje listę rozwijaną po zastosowaniu do opakowania |
| combobox-primary   | Kolor       | Podświetlenie głównego motywu kolorowego elementów     |
| combobox-secondary | Kolor       | Podświetlenie motywu dodatkowego dla elementów         |
| combobox-accent    | Kolor       | Podświetlenie motywu akcentującego dla przedmiotów     |
| combobox-info      | Kolor       | Informacje semantyczne wyróżnienie koloru              |
| combobox-success   | Kolor       | Sukces semantycznego podkreślenia koloru               |
| combobox-warning   | Kolor       | Ostrzeżenie: semantyczne podkreślenie koloru           |
| combobox-error     | Kolor       | Błąd semantycznego podświetlenia koloru                |

## Podstawowe użycie

Zawiń `input` i `combobox-list` w kontenerze `względnym`. Dodaj `combobox-open` do opakowania, aby wyświetlić listę — przełącz ją za pomocą JS lub `:focus-within`.

## Otwórz w Focusie

Użyj `focus-within:combobox-open` na opakowaniu, aby otworzyć listę, gdy dane wejściowe są aktywne — nie jest wymagana obsługa 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>
```

## Rozmiary

Użyj `input-sm`, `input-lg` itp. w polu wejściowym. Lista rozwijana dostosowuje się naturalnie.

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

## Zabarwienie

Użyj `input-primary` itp. na wejściu dla koloru pola. Dodaj pasujący element `combobox-primary` do opakowania, aby zabarwić podświetlenie aktywnego elementu.

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

## Wyłączony

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

## Z Guzikiem

Utwórz tekst za pomocą `join`, aby dołączyć ikonę wyszukiwania lub przycisk wyzwalający.

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

## Elementy jako łącza lub przyciski

`combobox-item` działa na dowolnym elemencie — `<li>`, `<a>` lub `<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>
```

## Pomocnik JS i reagowania

Użyj `createCombobox` z `frutjam/js` lub `useCombobox` z `frutjam/react`, aby uzyskać filtrowanie, nawigację za pomocą klawiatury (↑ ↓ Enter Escape) i pełne okablowanie `aria-*` od razu po wyjęciu z pudełka. Wyczekuj zdarzenia `fj:select`, które obsłuży selekcję.