Input Suggestions With HTML datalist

A <select> requires one of its options. A text input accepts anything. <datalist> is useful in the smaller space between them: known suggestions help, but another value is still valid.

Connect the list to an input

<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

The input’s list value matches the datalist’s id. The browser offers the options as the user types, but it does not validate the final value against them.

That last part is easy to miss. If only those four browsers are accepted, use a <select> or add real validation.

It works best with a small, familiar set

Camera models are a reasonable example:

<label for="camera">Camera model</label>
<input id="camera" name="camera" list="camera-models">

<datalist id="camera-models">
  <option value="Sony A7 V">
  <option value="Sony A7 IV">
  <option value="Canon EOS R6 Mark II">
  <option value="Nikon Z6 III">
</datalist>

Someone can choose a common model or type one that is not listed. The same pattern can work for tags, common search phrases, or a short list of amounts:

<input type="number" list="amounts">

<datalist id="amounts">
  <option value="10">
  <option value="25">
  <option value="50">
  <option value="100">
</datalist>

I would not put thousands of cities into the markup. A large or remotely searched dataset needs a more deliberate autocomplete component.

Native means limited control

Browsers decide how the popup is drawn and how suggestions are filtered. Styling is limited, and assistive-technology behaviour has differed between browser and screen-reader combinations.

Test the combinations your audience relies on when suggestions are important. If the list is optional, the fallback is reassuringly plain: the input still accepts typed text when the suggestion UI is unavailable.

<datalist> is not a replacement for every custom combobox. It is a small native option for a small problem. When that is the problem you have, no JavaScript is a rather good dependency count.