Web/HTML/Element/datalist

The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Content categories	Flow content, phrasing content.
Permitted content	Either phrasing content or zero or more <option> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	listbox
Permitted ARIA roles	No role permitted
DOM interface	HTMLDataListElement

Attributes

This element has no other attributes than the global attributes, common to all elements.

Examples

Basic datalist

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Customizing datalist styles

The style of the list produced by a <datalist> element is platform-dependent, so if you want to customize the display of the options, you have to implement your own custom solution that overrides the default behavior. The below example provides a simple solution for this. Note how we haven't specified the <datalist> id inside the <input> list attribute in this case, as that stops the browser-specific display of the data list items from kicking in. Instead, we are setting the selected <datalist> value in the <input> via JavaScript.

Note: Since ::after is not permitted on <input> elements, if you want to reproduce the arrow-down icon you will have to wrap the <input> element in another element that you can hang the styling on (or some other suitable solution).

HTML

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

CSS

datalist {
  position: absolute;
  background-color: lightgrey;
  font-family: sans-serif;
  font-size: 0.8rem;
}

option {
  background-color: #bbb;
  padding: 4px;
  margin-bottom: 1px;
  cursor: pointer;
}

JavaScript

input.onfocus = function () {
  datalist.style.display = 'block';
}

for (let option of datalist.options) {
  option.onclick = function () {
    input.value = this.value;
    datalist.style.display = 'none';
  }
}

datalist.style.width = input.offsetWidth + 'px';
datalist.style.left = input.offsetLeft + 'px';
datalist.style.top = input.offsetTop + input.offsetHeight + 'px';

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<datalist>' in that specification.	Living Standard
HTML5The definition of '<datalist>' in that specification.	Recommendation

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
datalist	Chrome Full support 20	Edge Full support 12	Firefox Full support 4	IE Full support 10	Opera Full support 9.5	Safari Full support 12.1	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Since Firefox for Android 79, the dropdown menu containing available options does not appear. See bug 1535985.	Opera Android Partial support Partial Notes' Partial support Partial Notes' Notes' The dropdown menu containing available options does not appear in Opera for Android.	Safari iOS Full support 12.2	Samsung Internet Android Full support 2.0

Legend

Full support  

Full support

Partial support  

Partial support

See implementation notes.'

See implementation notes.

Polyfill

Include this polyfill to provide support for older and currently incompatible browsers: datalist-polyfill

See also

• The <input> element, and more specifically its list attribute;
• The <option> element.

<datalist>: The HTML Data List element by Mozilla Contributors is licensed under CC-BY-SA 2.5.