A native browser combobox. Pair any text input with a
<datalist> to get autocomplete suggestions for
free, no CSS or JavaScript required.
Composed of
Text Field- The input the suggestions attach to
The browser handles filtering, keyboard navigation, and accessibility. The tradeoff is that the suggestion popup is browser-controlled and cannot be styled.
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/datalist.css" />Default
<input type="text" list="fruits" placeholder="Search fruits..." />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Banana"></option>
<option value="Cherry"></option>
<option value="Mango"></option>
<option value="Pineapple"></option>
</datalist>In a field
Works inside .field like any other input. The
<datalist> is display: none so it
drops out of the flex layout without adding any gap.
<label class="field">
<span>Favourite fruit</span>
<input type="text" list="fruits" placeholder="Search..." />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Banana"></option>
<option value="Cherry"></option>
</datalist>
<small>Start typing to filter suggestions.</small>
</label>