Combobox

<div class="b-combobox" style="max-width:18rem">
  <input class="b-input" placeholder="Choose a framework">
  <ul class="b-combobox-list">
    <li class="b-combobox-option" data-value="React">React</li>
    <li class="b-combobox-option" data-value="Vue">Vue</li>
    <li class="b-combobox-option" data-value="Svelte">Svelte</li>
    <li class="b-combobox-option" data-value="Solid">Solid</li>
    <li class="b-combobox-option" data-value="Astro">Astro</li>
    <li class="b-combobox-option" data-value="Qwik">Qwik</li>
  </ul>
</div>

<div class="b-combobox">
  <input class="b-input" placeholder="Choose…">
  <ul class="b-combobox-list">
    <li class="b-combobox-option" data-value="A">A</li>
    <li class="b-combobox-option" data-value="B">B</li>
  </ul>
</div>

Behavior (with autoInit())

• Typing filters the listbox
• Arrow Down/Up navigate, Home/End jump to the first and last option
• Enter selects the active option
• Escape closes
• Click selects

autoInit() also wires up the ARIA: the input becomes role="combobox" with aria-controls and aria-expanded, the list becomes role="listbox", and each option gets role="option" plus a generated id. As you arrow through, the active option's id is written to aria-activedescendant on the input — DOM focus never leaves the input, so this is what makes the current option announced. Options you supply with your own id keep it.

Listening for selection

document.addEventListener("b:combobox:select", (e) => {
  console.log("Selected:", e.detail.value);
});

API