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.

Attributes

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

Examples

<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>

Result

Specifications

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 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