HTML datalist Tag: Syntax, Usage, and Examples

The HTML datalist tag (<datalist>) adds autocomplete suggestions to a text input. You can guide people toward valid values without forcing them to pick from a strict dropdown.

How to Use the datalist Tag

You use the HTML datalist tag together with an <input> element. The input points to the datalist by matching the input’s list attribute with the datalist’s id.

Here’s the basic pattern:

<labelfor="city">City</label>
<inputid="city"name="city"list="city-suggestions" />

<datalistid="city-suggestions">
<optionvalue="Podgorica"></option>
<optionvalue="Vienna"></option>
<optionvalue="Zagreb"></option>
<optionvalue="Berlin"></option>
</datalist>

A few details matter:

• The list attribute goes on the input. Without it, the browser won’t connect the two.
• The <datalist> needs an id. That id is the “hook” the input uses.
• Each suggestion is an <option>. In a datalist, the option’s value is the important part.
• Users can still type something else. The suggestions help, but they do not lock the input.

Datalist works with several input types

<datalist> works best with inputs like text, search, email, url, and tel. You’ll also see it used with number in some cases, though support and behavior can vary depending on the browser.

A nice “search-style” example:

<labelfor="skill">Search a skill</label>
<inputid="skill"name="skill"type="search"list="skill-list"placeholder="Start typing…" />

<datalistid="skill-list">
<optionvalue="HTML"></option>
<optionvalue="CSS"></option>
<optionvalue="JavaScript"></option>
<optionvalue="Python"></option>
<optionvalue="SQL"></option>
</datalist>

Add a human-friendly label (optional)

Some browsers may display a label next to the value. To do that, add a label attribute to <option>. Keep in mind that behavior differs by browser, so treat labels as a bonus, not a guarantee.

<inputid="timezone"name="timezone"list="tz-list" />

<datalistid="tz-list">
<optionvalue="Europe/Podgorica"label="Montenegro"></option>
<optionvalue="Europe/Vienna"label="Austria"></option>
<optionvalue="Europe/Zagreb"label="Croatia"></option>
</datalist>

Datalist is not a dropdown

A <select> forces one of the given options. A datalist suggests options, but typing any value still works. That difference is the whole point.

When to Use the datalist Tag

The HTML datalist tag is useful when you want to speed up data entry and reduce typos, while still letting users enter values that are not in your list.

Here are several practical use cases.

1) Suggest common values, without blocking edge cases

Many fields have “usual answers” plus a long tail of uncommon ones.

Examples:

• Job title (Developer, Designer, Product Manager, plus thousands of real variations)
• City name (popular cities, plus small towns)
• Favorite programming language (common choices, plus niche ones)

A datalist helps people pick quickly while still respecting uncommon inputs.

2) Reduce spelling mistakes in important fields

Typos can break workflows. Think about a form where users type a product code, a team name, or a country. Suggestions act like guardrails.

People still can type, but most won’t if the right option appears after a few keystrokes.

3) Make forms feel faster on mobile

Mobile typing can be slow. Autocomplete suggestions reduce the amount of typing needed, which often leads to higher completion rates.

A datalist can be a small upgrade with a big “ah, nice” effect.

4) Improve internal tools and admin panels

Internal forms often include fields like “department,” “project name,” or “client.” If the values repeat, datalist suggestions speed things up.

Nobody wants to type “Customer Success Operations” 30 times a week.

5) Provide lightweight “typeahead” behavior without extra libraries

You can get basic suggestion behavior using plain HTML. For simple cases, that is easier than building a custom autocomplete widget.

Examples of the datalist Tag

Below are several examples that cover common patterns.

1) Country field with suggestions

<form>
<labelfor="country">Country</label>
<inputid="country"name="country"list="country-list"autocomplete="on" />

<datalistid="country-list">
<optionvalue="Montenegro"></option>
<optionvalue="Croatia"></option>
<optionvalue="Austria"></option>
<optionvalue="Germany"></option>
<optionvalue="United Kingdom"></option>
<optionvalue="United States"></option>
</datalist>

<buttontype="submit">Save</button>
</form>

Why this works well:

• The list helps users pick a common value quickly.
• The input stays flexible for countries not listed.

2) Linking a datalist to a number input (simple range hints)

Some browsers show the suggestions as ticks or options. Others handle it differently. Still, this can be handy for “typical” values.

<labelfor="hours">Hours per week</label>
<inputid="hours"name="hours"type="number"min="0"max="80"list="hour-suggestions" />

<datalistid="hour-suggestions">
<optionvalue="5"></option>
<optionvalue="10"></option>
<optionvalue="20"></option>
<optionvalue="40"></option>
</datalist>

This is a polite nudge. People can still enter 37, but the common picks are right there.

3) Autocomplete for a search box

<labelfor="topic">Search a glossary topic</label>
<input
id="topic"
name="topic"
type="search"
list="topic-suggestions"
placeholder="Try: arrays, loops, closures…"
/>

<datalistid="topic-suggestions">
<optionvalue="Array"></option>
<optionvalue="Function"></option>
<optionvalue="Closure"></option>
<optionvalue="Promise"></option>
<optionvalue="Event loop"></option>
</datalist>

A datalist can make search feel “smart” with almost no code.

4) Using JavaScript to update datalist options

Static suggestions are great, but sometimes you want suggestions that depend on another field. For example, a “City” list that changes after someone chooses a country.

This example updates the datalist when the country changes:

<labelfor="country2">Country</label>
<selectid="country2"name="country2">
<optionvalue="me">Montenegro</option>
<optionvalue="at">Austria</option>
<optionvalue="hr">Croatia</option>
</select>

<labelfor="city2">City</label>
<inputid="city2"name="city2"list="city2-list" />

<datalistid="city2-list"></datalist>

<script>
const cityMap = {
me: ["Podgorica","Budva","Kotor","Nikšić"],
at: ["Vienna","Graz","Salzburg","Innsbruck"],
hr: ["Zagreb","Split","Rijeka","Osijek"],
  };

const countrySelect =document.getElementById("country2");
const datalist =document.getElementById("city2-list");

functionupdateCities(countryCode) {
    datalist.innerHTML ="";

    cityMap[countryCode].forEach((city) => {
const option =document.createElement("option");
      option.value = city;
      datalist.appendChild(option);
    });
  }

updateCities(countrySelect.value);

  countrySelect.addEventListener("change",(e) => {
updateCities(e.target.value);
  });
</script>

This approach stays simple because the <input> remains a normal text field. A user can type something else, and the browser can still suggest from the updated list.

Learn More About the datalist Tag

<datalist> vs <select>

These elements look similar at first glance, but they behave differently:

• <select>: the user must pick one of the provided options (unless you allow custom input with extra work).
• <datalist>: the user gets suggestions, but can still type any value.

Pick <select> when:

• Only valid values should be submitted
• The list is short and fixed
• You want predictable UI across browsers

Pick the HTML datalist tag when:

• Suggestions help, but strict rules would be annoying
• The list is large or changes often
• You want typeahead-style input with minimal setup

Validation and datalist

A datalist does not validate that the value matches one of the suggestions. If you need strict validation, use one of these approaches:

• Switch to <select>
• Validate on the server (always recommended for important data)
• Add client-side validation with JavaScript

Here’s a lightweight client-side check that verifies the typed value is in the list:

<labelfor="role">Role</label>
<inputid="role"name="role"list="role-list" />

<datalistid="role-list">
<optionvalue="Student"></option>
<optionvalue="Teacher"></option>
<optionvalue="Mentor"></option>
</datalist>

<pid="role-error"style="display:none;">Pick one of the suggested roles.</p>

<script>
const roleInput =document.getElementById("role");
const options =Array.from(document.querySelectorAll("#role-list option")).map(
(opt) => opt.value
  );
const error =document.getElementById("role-error");

  roleInput.addEventListener("blur",() => {
const value = roleInput.value.trim();
const valid = value ==="" || options.includes(value);

    error.style.display = valid ?"none" :"block";
  });
</script>

This is optional, but it shows the big idea: suggestions and validation are separate.

Accessibility notes

<datalist> can be helpful, but support varies across browsers and assistive technologies. A few practical tips:

• Always use a visible <label> for the input.
• Keep suggestions clear and unambiguous.
• Avoid relying on the datalist as the only way to understand the field.

A label like “City” beats placeholder-only hints every time.

Browser differences to keep in mind

Datalist UI can look different depending on the browser and device. Some browsers show a dropdown list. Others show it more like inline suggestions. Mobile behavior can also vary.

Because of that, treat datalist as a convenience feature. The form should still work if the suggestion UI feels minimal.

Styling a datalist

CSS can style the input, but styling the suggestion dropdown itself is limited. If you need a fully custom look, you may have to build a custom autocomplete component with JavaScript.

For many forms, default styling is fine. Function beats fancy.

Common mistakes with the datalist tag

Forgetting to match list and id

If list="cities" and the datalist has id="city-list", the suggestions won’t show.

Using <option> without value

In a datalist, value is the main thing the browser uses.

Expecting datalist to enforce valid values

A datalist suggests, it does not restrict. Validation needs extra work.

Using it for huge datasets

A datalist with thousands of options can get heavy. For large lists, consider server-backed search suggestions or a custom autocomplete.