Syntax
<input list="options" name="choice">
<datalist id="options">
<option value="Option A">
<option value="Option B">
</datalist>Examples
Basic Autocomplete
Suggesting common browser names while allowing free text.
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>Number Suggestions
Using datalist to suggest common numeric values.
<label for="rating">Rating:</label>
<input type="range" list="ratings" id="rating" min="0" max="10">
<datalist id="ratings">
<option value="0"></option>
<option value="5"></option>
<option value="10"></option>
</datalist>City Search Suggestions
Suggesting cities while allowing any typed value.
<input list="cities" name="city" placeholder="Search for a city">
<datalist id="cities">
<option value="Manchester">
<option value="London">
<option value="Leeds">
</datalist>Attributes
- id (string): Referenced by the input's list attribute
Best practices
- Use datalist when you want to suggest common values without forcing the user to pick only from a fixed list — use select for that instead
- Connect it to an input using matching list and id attributes
- Keep the suggestion list reasonably short and relevant so it stays genuinely useful
- Test the visual behavior across browsers, since datalist styling and interaction is less consistent than other form controls
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<datalist>
Desktop
- Chrome
- Supported
From 20 - Firefox
- Supported
From 4 - Safari
- Supported
From 12.1 - Edge
- Supported
From 12 - Opera
- Supported
From 9.5
Mobile
- Safari on iOS
- Supported
From 12.2 - Chrome for Android
- Supported
From 33 - Firefox for Android
- Partially supported
From 79 - Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 20
Firefox
- From 4
Safari
- From 12.1
Edge
- From 12
Opera
- From 9.5
Safari on iOS
- From 12.2
Chrome for Android
- From 33
Firefox for Android
- From 79 · Partial implementation · The dropdown menu containing available options does not appear. See bug 1535985.
- From 4 · Removed in 79 · Last supported version: 68
Samsung Internet
- From 2.0
id
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 32 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 32 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 32
- From 1 · Removed in 32 · Last supported version: 31 · Partial implementation · id is a true global attribute only since Firefox 32.
Safari
- From 1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 32
- From 4 · Removed in 32 · Last supported version: 31 · Partial implementation · id is a true global attribute only since Firefox for Android 32.
Samsung Internet
- From 1.0
<datalist> input type="text"
Desktop
- Chrome
- Supported
From 20 - Firefox
- Supported
From 4 - Safari
- Supported
From 12.1 - Edge
- Supported
From 12 - Opera
- Supported
From 9.5
Mobile
- Safari on iOS
- Supported
From 12.2 - Chrome for Android
- Supported
From 33 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 20
Firefox
- From 4
Safari
- From 12.1
Edge
- From 12
Opera
- From 9.5
Safari on iOS
- From 12.2
Chrome for Android
- From 33
Firefox for Android
- From 4
Samsung Internet
- From 2.0
<datalist> input type="color"
Desktop
- Chrome
- Supported
From 20 - Firefox
- Not supported
- Safari
- Supported
From 12.1 - Edge
- Supported
From 14 - Opera
- Supported
From 12
Mobile
- Safari on iOS
- Supported
From 12.2 - Chrome for Android
- Supported
From 33 - Firefox for Android
- Not supported
- Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 20
Firefox
- Not supported
Safari
- From 12.1
Edge
- From 14
Opera
- From 12
Safari on iOS
- From 12.2
Chrome for Android
- From 33
Firefox for Android
- Not supported
Samsung Internet
- From 2.0
<datalist> input type="range"
Desktop
- Chrome
- Supported
From 20 - Firefox
- Supported
From 110 - Safari
- Supported
From 12.1 - Edge
- Supported
From 12 - Opera
- Supported
From 11
Mobile
- Safari on iOS
- Supported
From 12.2 - Chrome for Android
- Supported
From 57 - Firefox for Android
- Not supported
- Samsung Internet
- Supported
From 7.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 20
Firefox
- From 110
Safari
- From 12.1
Edge
- From 12
Opera
- From 11
Safari on iOS
- From 12.2
Chrome for Android
- From 57
Firefox for Android
- Not supported
Samsung Internet
- From 7.0
<datalist> input type="date"
Desktop
- Chrome
- Supported
From 20 - Firefox
- Not supported
- Safari
- Supported
From 14.1 - Edge
- Supported
From 12 - Opera
- Supported
From 11
Mobile
- Safari on iOS
- Supported
From 14.5 - Chrome for Android
- Supported
From 33 - Firefox for Android
- Not supported
- Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 20
Firefox
- Not supported
Safari
- From 14.1
Edge
- From 12
Opera
- From 11
Safari on iOS
- From 14.5
Chrome for Android
- From 33
Firefox for Android
- Not supported
Samsung Internet
- From 2.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.