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

<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>

Finished reading?

Mark this topic as complete to track progress.

Next Topic