Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Combobox-Komponente

Zuletzt aktualisiert:

Nur CSS-Kombinationsfeld Tailwind CSS mit Live-Suchfilterung und zugänglicher Dropdown-Liste. Tastaturnavigation, Farbvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Combobox kombiniert eine Texteingabe mit einer Dropdown-Liste. Verwenden Sie die input-Komponente für das Feld – Größen-, Farb- und Statusvarianten stammen von dort. Die Dienstprogramme combobox-* verarbeiten nur die Dropdown-Liste, Elemente und den geöffneten Status.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
combobox-listBaseDropdown-Listencontainer für Combobox-Optionen
combobox-itemModifikatorIndividuelle Option innerhalb der Dropdown-Liste
combobox-openModifikatorZeigt die Dropdown-Liste an, wenn sie auf den Wrapper angewendet wird
combobox-primaryFarbeFarbhervorhebung des primären Themas für Elemente
combobox-secondaryFarbeFarbhervorhebung des sekundären Themas für Elemente
combobox-accentFarbeFarbliche Hervorhebung des Akzentthemas für Artikel
combobox-infoFarbeInfo-semantische Farbhervorhebung
combobox-successFarbeErfolgreiche semantische Farbhervorhebung
combobox-warningFarbeWarnende semantische Farbhervorhebung
combobox-errorFarbeSemantische Farbhervorhebung des Fehlers

Grundlegende Verwendung

Wickeln Sie eine Eingabe und eine Combobox-Liste in einen relativen-Container ein. Fügen Sie combobox-open zum Wrapper hinzu, um die Liste anzuzeigen – schalten Sie es über JS oder :focus-within um.

  • React
  • Vue
  • Angular
  • Svelte
1
2
3
4
5
6
7
8
9
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search or select...">
  <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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useCombobox } from 'frutjam/react'

const frameworks = ['React', 'Vue', 'Angular', 'Svelte']

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search or select..." />
      <ul className="combobox-list" role="listbox">
        {combo.filtered.map((item, i) => (
          <li key={item} {...combo.optionProps(item, i)} className="combobox-item">{item}</li>
        ))}
      </ul>
    </div>
  )
}

Offen für Fokus

Verwenden Sie focus-within:combobox-open im Wrapper, um die Liste zu öffnen, wenn die Eingabe fokussiert ist – kein JavaScript erforderlich.

  • React
  • Vue
  • Angular
  • Svelte
html 
1
2
3
4
5
6
7
8
9
<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>

Größen

Verwenden Sie input-sm, input-lg usw. im Eingabefeld. Das Dropdown passt sich natürlich an.

  • Banana
  • Mango
  • Papaya
  • Banana
  • Mango
  • Papaya
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

Farben

Verwenden Sie input-primary usw. in der Eingabe für die Feldfarbe. Fügen Sie dem Wrapper das passende combobox-primary hinzu, um die aktive Elementhervorhebung einzufärben.

  • React
  • Vue
  • Angular
  • React
  • Vue
  • Angular
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

Deaktiviert

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

Mit Knopf

Verfassen Sie mit join, um ein Suchsymbol oder eine Auslöseschaltfläche anzuhängen.

🔍
  • React
  • Vue
  • Angular
  • Svelte
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<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>

Elemente als Links oder Schaltflächen

combobox-item funktioniert für jedes Element – ​​<li>, <a> oder <button>.

html 
1
2
3
4
5
6
7
8
<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

Verwenden Sie createCombobox aus frutjam/js oder useCombobox aus frutjam/react, um Filterung, Tastaturnavigation ( ↑ ↓ Enter Escape ) und vollständige aria-*-Verkabelung sofort zu erhalten. Warten Sie auf das Ereignis fj:select, um die Auswahl zu verarbeiten.

  • React
  • Vue
  • Angular
  • Svelte
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64" id="js-combobox">
  <input type="text" class="input w-full" placeholder="Search frameworks...">
  <ul class="combobox-list">
    <li class="combobox-item" data-value="react">React</li>
    <li class="combobox-item" data-value="vue">Vue</li>
    <li class="combobox-item" data-value="angular">Angular</li>
    <li class="combobox-item" data-value="svelte">Svelte</li>
  </ul>
</div>
<script type="module">
  import { createCombobox } from 'frutjam/js'
  const combo = createCombobox(document.getElementById('js-combobox'))
  document.getElementById('js-combobox').addEventListener('fj:select', (e) => {
    console.log('Selected:', e.detail.value)
  })
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useCombobox } from 'frutjam/react'

const frameworks = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
]

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search frameworks..." />
      <ul {...combo.listboxProps} className="combobox-list">
        {combo.filtered.map((item, i) => (
          <li key={item.value} {...combo.optionProps(item, i)}>{item.label}</li>
        ))}
      </ul>
    </div>
  )
}

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Combobox-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP