<datalist>
A list of suggestions for an `<input>` field. You can pick a proposal or type your own value.
- Display
- none
- Closing tag
- Required
- Permitted content
- Elements
<option>
Example
#<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing…">
<datalist id="cities">
<option value="Austin">
<option value="Boston">
<option value="Chicago">
<option value="Denver">
<option value="Seattle">
</datalist>Definition and usage
#The <datalist> element holds a set of suggested values for an <input> field. You connect them by giving the list’s id in the field’s list attribute. While typing, the browser shows matching proposals, similar to a search box with autocomplete.
Unlike <select>, the list doesn’t restrict the choice. The user can type anything, and the suggestions only speed up typing. That’s why <datalist> works well for fields like "City" or "Favorite language", where there are popular answers but the list isn’t closed.
The element itself isn’t displayed on the page. Suggestions work with text fields, as well as with types such as email, url, number or range, though their appearance depends on the browser. Firefox on Android doesn’t show them at all, so the field must still be usable without the suggestions.
Syntax
#<input list="list-id">
<datalist id="list-id">
<option value="…">
</datalist>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Browser support
#Limited support
Not every browser supports it. Check support before you use it in production.
Good practices
#- Don’t use
<datalist>where only one of the given values is allowed.<select>is the better choice there, and the server still has to validate the value either way. - An option can also have a
labelattribute, which some browsers show next to the value as a description of the suggestion.
Related entries
#- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <option>A single option in a `<select>` list, or a suggestion in a `<datalist>`.
- <select>A dropdown list the user picks one or more options from.
- <label>A form field’s label. Clicking the label moves the cursor to the field.
Spotted a mistake or missing an example? Write to us.