HTML <datalist> Tag

The <datalist> tag is one of the HTML5 elements. It provides a list of predefined suggestions for an <input> field, giving you an autocomplete-style dropdown while still allowing the user to type any value they want. As the user starts typing, the browser filters the suggestions and shows the ones that match.

This is what makes <datalist> different from a <select> menu: a <select> constrains the user to a fixed set of choices, while a <datalist> only suggests values — the field stays free-text.

Predefined options are enclosed in nested <option> elements.

How the three pieces connect

A working datalist always involves three parts that you wire together by id:

An <input> element with a list attribute.
A <datalist> element whose id matches that list value.
One or more <option> elements inside the <datalist> that hold the suggestions.

<input list="ice-cream-flavors" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Vanilla"></option>
  <option value="Strawberry"></option>
</datalist>

The link is purely by name: the list value on the input ("ice-cream-flavors") must be identical to the id on the <datalist>. If they don't match exactly, no suggestions appear. The <datalist> itself is not displayed on the page — only its options surface, inside the input's dropdown.

The `<option>` children

Each suggestion is a single <option> element. There are two ways to provide its text:

value attribute — the text inserted into the input when the option is chosen.
Visible label — text between the opening and closing tags, shown to the user.

If you set only value, that same string is both shown and inserted:

<option value="Firefox"></option>

You can also pair a machine value with a friendlier description using the label attribute (or label text), which some browsers display alongside the value:

<option value="FF" label="Firefox"></option>

Here the input receives FF, while the dropdown can show the more readable Firefox. Browser rendering of separate value/label pairs varies, so for most cases keeping value human-readable is the simplest and most reliable approach.

`<datalist>` vs. `<select>`

Both present a list of choices, but they solve different problems:

	`<datalist>`	`<select>`
User input	Free text — can type anything	Constrained to listed options
Role of the list	Suggestions / autocomplete	The only allowed values
Typing to filter	Yes, filters as you type	Limited
Submitted value	Whatever is in the field	Always one of the options
Use it when	You want hints but allow custom values (search box, email domain, city)	The answer must be one of a fixed set (country code, plan tier)

Reach for <datalist> when suggestions help but a custom value is still valid; reach for <select> when only the offered values are acceptable.

Syntax

The <datalist> tag comes in pairs. The content is written between the opening (<datalist>) and closing (</datalist>) tags.

Example of the HTML `<datalist>` tag:

HTML <datalist> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="browser">Choose browser</label>
    <input list="browsers" id="browser" />
    <!-- The list attribute value matches the datalist id -->
    <datalist id="browsers">
      <option value="Opera"></option>
      <option value="Safari"></option>
      <option value="Firefox"></option>
      <option value="Google Chrome"></option>
      <option value="Maxthon"></option>
    </datalist>
  </body>
</html>

Try it Yourself »

Result

Using a real <label> (instead of a plain <div>) and pointing its for attribute at the input's id connects the caption to the field, so screen readers announce it and clicking the label focuses the input.

Example: a country picker

A datalist works well for inputs with many well-known values where you still want to allow free text — such as picking a country inside a form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="country">Your country</label>
      <input list="countries" id="country" name="country" />
      <datalist id="countries">
        <option value="Argentina"></option>
        <option value="Brazil"></option>
        <option value="Canada"></option>
        <option value="France"></option>
        <option value="Germany"></option>
        <option value="Japan"></option>
        <option value="United States"></option>
      </datalist>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Result

Browser support

<datalist> is supported by all modern desktop browsers. Be aware of mobile caveats: support on iOS Safari has historically been incomplete or inconsistent across versions, and some older or less common browsers ignore the element entirely. Because the field is just a normal text input, browsers that don't render the suggestions simply show a plain input — so use <datalist> as a progressive enhancement, not as your only way to convey valid values.

Attributes

The <datalist> tag has no element-specific attributes. All of its wiring is done through the id (matched by the input's list attribute), and the suggestions live in its child <option> elements. It does support the Global Attributes and the Event Attributes.

Practice

What is the usage of the HTML <datalist> tag?

It specifies a list of pre-defined options for an <input> element.It is used to insert images into a web page.It defines a caption for a <figure> element.It restricts an input to only the listed values, like a <select>.It is used to create animated graphics.