Combobox
Native web component that turns <option> elements into a searchable selector: it renders an input that opens a listbox popover filtered by substring of the typed text, with keyboard navigation and selection by click. Use it when you have a known list of options and want to let the user quickly find and choose an item by typing part of the label. Built on the native Popover API and CSS anchor positioning, with no dependencies.
Preview
<pura-combobox placeholder="Select a state..." value="sp">
<option value="sp" label="São Paulo"></option>
<option value="rj" label="Rio de Janeiro"></option>
<option value="mg" label="Minas Gerais"></option>
<option value="ba" label="Bahia"></option>
<option value="pr" label="Paraná"></option>
<option value="rs" label="Rio Grande do Sul"></option>
<option value="pe" label="Pernambuco"></option>
<option value="ce" label="Ceará"></option>
</pura-combobox>
<script type="module">
const cb = document.querySelector("pura-combobox");
cb.addEventListener("change", (e) => {
console.log("selected:", e.detail.value, e.detail.label);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
placeholder | string | "" | Placeholder text shown in the input when no value is selected. |
value | string | "" | Initial/current value; must match the value of one of the options to populate the label. |
disabled | boolean | false | Disables the input and prevents the listbox from opening. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/combobox.js"></script>import "./pura/lib/combobox.js";