? HTML <datalist> Element

⚡ Quick Overview

The <datalist> element provides a list of suggested values for an <input>. Users can pick a suggestion or type any custom value. This improves UX by reducing typing and errors while still allowing flexible input.

You connect an <input> to a <datalist> using the input’s list attribute and the datalist’s id. Each suggestion is an <option> inside the datalist.

? Key Concepts

Attach suggestions by setting the input's list attribute to the datalist's id.
Add one <option value="..."> per suggestion (text comes from the value).
Datalist suggests, it does not restrict: users can still type any value, so validate on the server or with HTML validation.

? Syntax & Structure

? View Basic Syntax

<!-- Input connected to a datalist by list/id -->
<input type="text" list="my-options">
<datalist id="my-options">
  <option value="First choice"></option>
  <option value="Second choice"></option>
</datalist>

? Basic Example

? View Code Example

<!-- Input connected to a datalist -->
<label for="browser">Favorite browser</label>
<input type="text" id="browser" name="browser" list="browsers"
placeholder="Choose or type...">
<datalist id="browsers">
  <option value="Google Chrome"></option>
  <option value="Mozilla Firefox"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
  <option value="Opera"></option>
</datalist>

? Structured Data Pattern

Because only the input's text is submitted, you can use a hidden field to capture a code when a suggestion is chosen. Here we show country name and dial-code to the user, but submit a short country code.

? View Structured Example

<label for="country">Country</label>
<input type="text" id="country" name="country_display" list="countries"
placeholder="Type or choose...">
<input type="hidden" id="country_code" name="country_code">
<datalist id="countries">
  <option value="India (+91)" data-code="IN"></option>
  <option value="United States (+1)" data-code="US"></option>
  <option value="Japan (+81)" data-code="JP"></option>
  <option value="Germany (+49)" data-code="DE"></option>
</datalist>

? Live Output / Explanation

? Live Output – Basic

Favorite browser

Status: custom or suggestion

? Live Output – Structured

? Preview JSON

{ }

? Tips & Best Practices

Match the input's list attribute to the datalist's id.
Datalist suggests; it doesn't validate. Use required, pattern and server-side checks if you need fixed values.
Datalist works best with text-like inputs (text, search, email, tel); it’s ignored by some types (like number).
Suggestion UI is browser-native and not easily styled—plan for a simple, default appearance.
For huge lists, load suggestions progressively or consider an accessible combobox/autocomplete widget.

? Try It Yourself

Add more countries with data-code and update the preview to include dial codes.
Combine pattern with datalist so only values like Word (+NN) are accepted.
Create an email field with common domains in a datalist; on input, auto-complete the domain after @.
Measure keystrokes saved with and without datalist for a long set of common values.

? Summary

<datalist> adds suggestions to an <input> without restricting custom values.
You link them using the input’s list and the datalist’s id.
Each suggestion is an <option> whose value is what appears in the input.
For structured data, pair datalist with a hidden field to store codes while displaying friendly labels.
Always add separate validation if you require only specific values; datalist alone is not a validator.