Forms & Inputs

<datalist> Autocomplete

Suggest values for an <input> while letting users type freely.

1Autocomplete Suggestions

Pair an <input list=""> with a <datalist id=""> to show a drop-down of suggestions while still allowing custom input.

Example Code

css

<label for="browser">Browser</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Safari" />
  <option value="Edge" />
</datalist>

2Put the element in context

A datalist offers suggestions for an input without necessarily restricting it to those suggestions. That makes it different from a select. Browser presentation and accessibility behavior should be tested for your audience before relying on it for a critical form task.

3Practice with a small page

Create a text field with several city suggestions and try entering a city outside the list. Compare the result with a select that has fixed choices. Keep validation consistent with whether free text is genuinely accepted.

Finished reading?

Mark this topic as complete to track progress.

Next Topic