<datalist> Tag in HTML – Autocomplete Suggestions & Live Example

Quick facts

Category	Flow content, phrasing content
Content model	Either phrasing content or zero or more <option> elements
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLDataListElement`

Syntax

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

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	<datalist> itself takes only global attributes; give it an `id` and point an input’s `list` attribute at it. Each <option> uses `value` (and optionally `label`).

Common examples

Suggestions for a text field

Visitors can pick a suggestion or type something else.

<label for="browser">Favorite 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>

Tick marks on a slider

A datalist on type="range" adds tick marks at suggested values.

<label for="vol">Volume</label>
<input type="range" id="vol" min="0" max="100" list="marks">
<datalist id="marks">
  <option value="0"><option value="50"><option value="100">
</datalist>

Suggestions loaded from data

Fill the list with JavaScript, for example from a list of cities.

<input list="cities" id="city">
<datalist id="cities"></datalist>

<script>
  ["London", "Paris", "Tokyo"].forEach(c => {
    const o = document.createElement("option");
    o.value = c;
    cities.append(o);
  });
</script>

<datalist> vs a JavaScript autocomplete

<datalist> gives you suggestions with no JavaScript at all, works with the keyboard and screen readers, and uses the familiar dropdown of each browser. Its limits: you can’t style the dropdown, matching rules vary between browsers, and it’s awkward with thousands of options.

A JavaScript autocomplete library gives full control over the look, search logic and remote loading as people type — but you must make it accessible yourself. For simple suggestion lists, datalist is the quickest win.

	<datalist>	JS autocomplete
JavaScript needed	No	Yes
Styling the dropdown	No	Full
Large or remote lists	Awkward	Yes

Common mistakes to avoid

A mismatched id. The input’s list must match the datalist’s id exactly.
Expecting it to restrict the answer. Visitors can still type anything; use <select> if only listed values are allowed.
Putting text between option tags only. Browsers fill the field from the value attribute; always set it.
Hundreds of options. Long lists are slow to browse; keep suggestions short or filter them as people type.

Accessibility & SEO tips

Always give the input a visible <label> — the suggestion list doesn’t replace it.
Validate the value on the server too, since visitors can type anything.
Test the suggestions on a phone; mobile browsers show them in different places, such as above the keyboard.
Pick suggestions based on what most people actually type — they save typing on phones and reduce spelling mistakes in your form data.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. The look of the suggestion list and how it matches text differ between browsers.

Tutorial: HTML forms tutorial

Related tags

Frequently asked questions

What is the difference between <datalist> and <select>?

A <select> forces the user to pick one of its options. A <datalist> only suggests values; the user can still type something else. Use <select> when only listed answers are allowed.

Which input types work with <datalist>?

Text-like types (text, search, url, email, tel), number, range (where browsers can draw tick marks), color and the date and time types. How the suggestions look varies by browser.

Can I style the <datalist> dropdown?

No. The suggestion list is drawn by the browser and can't be styled with CSS. If you need a custom look, build the suggestions with JavaScript instead.

Can a <datalist> show a label different from the value?

Partly. Some browsers show the option's text next to its value in the list, but the value is always what fills the field.

Does <datalist> work on phones?

Yes, on iOS and Android. The suggestions appear in the browser's own list or above the keyboard.

Can I make the input accept only datalist values?

Not with datalist alone. Use a <select>, or check the value with JavaScript and the pattern attribute before the form is sent.

Can a <datalist> be used by more than one input?

Yes. Several inputs can point at the same datalist id with their list attribute, which avoids repeating the options.

Why are my datalist suggestions not showing?

Check that the input's list matches the datalist's id, that each option has a value, and that the input type supports suggestions. Some browsers only show them after you start typing or double-click.