References

Beginner-friendly references for web development, with live, editable examples.

The HTML <datalist> tag

Element All modern browsers Updated
Quick answer

The HTML <datalist> element provides a list of suggested <option> values for an <input>, connected via the input's list attribute. Unlike a <select>, the user can still type a value not in the list.

Overview

The <datalist> element offers autocomplete suggestions for a text input while still letting the user type anything they like. As they type, the browser surfaces matching suggestions, but free input remains allowed.

Wiring it up takes three steps: give the <datalist> an id, fill it with <option> values, and point the input's list attribute at that id. The options become suggestions for that field.

It is the right choice when you want to suggest values without restricting to them — recent searches, common cities, frequently used tags. When the value must be one of a fixed set, a <select> is the correct control instead.

Syntax

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

Example

Live example 
<label>Fruit: <input list="fr" placeholder="Type or pick…" style="padding:6px;"></label>
<datalist id="fr">
  <option value="Apple"><option value="Banana"><option value="Cherry">
</datalist>

Best practices

  • Use <datalist> to suggest values while still allowing free typing.
  • Connect it by matching the input's list attribute to the datalist's id.
  • When the value must come from a fixed set, use a <select> instead.
  • Still give the input a real <label> — the datalist only adds suggestions.

Frequently asked questions

What is the datalist element for?
It provides autocomplete suggestions for a text input while still allowing the user to type a value that is not in the list.
How do I add autocomplete suggestions to an input?
Create a <datalist> with an id and <option> values, then set the input's list attribute to that id.
What is the difference between datalist and select?
A <select> restricts the user to its options; a <datalist> only suggests them and still allows free input.
Can users type a value not in the datalist?
Yes. The suggestions are optional — the field accepts any text the user types.
data dd