Combobox

A searchable select dropdown with full keyboard navigation (Arrow keys, Enter, Escape).

Basic

Preview Code

<ac-combobox name="country" placeholder="Search country...">
<option value="ar">Argentina</option>
<option value="br">Brazil</option>
<option value="cl">Chile</option>
<option value="uy">Uruguay</option>
<option value="py">Paraguay</option>
</ac-combobox>

Copy

Keyboard navigation

Key	Action
ArrowDown	Open list / next item
ArrowUp	Previous item
Home / End	First / last item
Enter	Select focused item
Escape	Close list
Tab	Close without selecting

Events

document.querySelector('ac-combobox').addEventListener('ac-change', (e) => {
  console.log(e.detail.value, e.detail.label);
});

Attributes

Attribute	Description
name	Hidden input name for form submission
placeholder	Input placeholder text
value	Pre-selected value