The datalist Tag

The datalist tag attaches a suggestion dropdown to a normal input. As the user types, matching options appear below the field. They can click a suggestion or keep typing their own text. It sits between a plain input and a select box, taking the best of both.

The wiring is two attributes: the datalist gets an id, and the input points to it with list. Every option inside the datalist becomes a suggestion. No JavaScript and no library, and it works in every modern browser. In very old browsers the input simply behaves like a plain text box.

Why it exists: the combobox pattern, a text box with suggestions, appears in search fields, tag inputs, and address forms. Autocomplete libraries were heavy. Datalist gives the pattern for free, with native keyboard navigation built in: arrow keys move through suggestions, Enter picks one.

Datalist vs select

A select forces the user to pick from the list, which suits a fixed set of options like country codes. A datalist allows free typing on top of the suggestions, which suits anything open ended: city names, product searches, programming languages. Pick the one that matches how free the answer is.

<input list="cities" placeholder="Start typing">
<datalist id="cities">
  <option value="Austin"></option>
  <option value="Boston"></option>
</datalist>

Styling limits and validation

The dropdown part of a datalist is drawn by the browser, so you cannot style the list items much. The input itself styles normally. Also, datalist only suggests; it never restricts. A user can submit any text, so validate the final value on the server, never trust the list.

Syntax

<input list="browsers">
<datalist id="browsers">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
</datalist>

<input list="cities" autocomplete="off"> <!-- kills datalist! use autocomplete="on" -->
<datalist id="cities"><option value="Paris"></datalist>