HTML <datalist> Tag

What You’ll Learn

By the end of this tutorial, you’ll add autocomplete suggestions to inputs with <datalist> and know when to use it instead of <select>.

What Is the <datalist> Tag?

The datalist element (<datalist>) contains a list of <option> values that browsers suggest when the user focuses or types in a linked input. It is not visible on its own—it powers the input’s suggestion UI.

Common uses include browser names, countries, cities, product search, email domain hints, and any field where suggestions help but custom input is still allowed.

📝 Syntax

Give the <datalist> an id, then reference it from the input’s list attribute:

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

<datalist id="browser-list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Syntax Rules

• The list attribute goes on the input, not on datalist.
• input list must match the datalist id exactly.
• Each suggestion is an <option value="..."> inside the datalist.
• Works with input types like text, search, url, email, and number.

⚖️ <datalist> vs <select>

Choose the right control for your form field:

Examples Gallery

Basic autocomplete, browser picker, dynamic JavaScript options, and datalist vs select with copy-ready code and live previews.

<label for="choice">Choose an option:</label>
<input list="options-list" id="choice" name="choice">
<datalist id="options-list">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>

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

<input list="country-list" id="countries">
<datalist id="country-list"></datalist>

<script>
  var countries = ["India", "Indonesia", "Italy", "Iceland"];
  var input = document.getElementById("countries");
  var list = document.getElementById("country-list");

  input.addEventListener("input", function () {
    var q = input.value.toLowerCase();
    list.innerHTML = "";
    countries.forEach(function (c) {
      if (q && c.toLowerCase().startsWith(q)) {
        var opt = document.createElement("option");
        opt.value = c;
        list.appendChild(opt);
      }
    });
  });
</script>

<!-- datalist: custom input allowed -->
<input list="colors" name="color-dl">
<datalist id="colors">
  <option value="Red"><option value="Green">
</datalist>

<!-- select: fixed choices only -->
<select name="color-sel">
  <option>Red</option><option>Green</option>
</select>

♿ Accessibility

Make datalist-enhanced inputs usable for everyone:

• Always use label — associate it with the input, not the datalist.
• Use select when choices are strict — better screen reader support for fixed lists.
• Validate server-side — users can submit values not in the datalist.
• Keep suggestions relevant — short, clear option values help all users.

💡 Best Practices