Tag datalist

The <datalist> tag defines a list of predefined options for an <input> element. As the user starts typing into the input field, a dropdown list of suggestions appears based on the <datalist> entries.

It works like an autocomplete feature but with values you control.

✅ Basic Syntax

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

📍 Result:
When the user starts typing in the input, a dropdown with matching suggestions appears.

🧩 How It Works

  • The <input> uses the list attribute to refer to the <datalist> by id.
  • Each <option> inside <datalist> provides a possible suggestion.
  • Users can type anything, not just the options.

🛠️ If you want to restrict input to only certain values, use <select> instead.

🔧 Features

FeatureDescription
AutocompleteSuggests matching items as the user types
Customizable listYou control the options shown
Freeform inputUsers can still enter their own text
LightweightRequires no JavaScript

🎨 Example: Country Picker

<input list="countries" placeholder="Start typing a country...">
<datalist id="countries">
  <option value="United States">
  <option value="United Kingdom">
  <option value="Canada">
  <option value="Australia">
  <option value="Germany">
</datalist>

✅ Summary

Tag<datalist>
PurposeProvides suggestions to <input>
Used with<input list="id">
Child tags<option>
HTML5?✅ Yes
User inputCan be freeform (not restricted)

⚠️ Notes

  • <datalist> options don’t support labels or grouping like <select>.
  • Not all browsers support complex styling of <datalist> dropdowns.
  • Avoid using it for very long lists (e.g. 1,000+ items) for performance reasons.