HTML - datalist


datalist is a html element that creates a set of value permitted (a domain) that may be used in a input element by grouping options.

It does not force a selection as the HTML select element does

It introduces a autocomplete filtering on the value entered.

Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value is selected.



with a input text element

  • The HTML
<datalist id="theme-values">
    <option value="Orange">
    <option value="Red">
    <option value="Green">
    <option value="Yellow">

<label for="themes">Choose a theme:</label>
<input type="text" list="theme-values" id="themes" size=20 />
  • Result:

Unfortunately, once a value was selected, you need to delete it to be able to select another one. If you have few values, you may want to use select.


with a input number element

<datalist id="even-values">
    <option value="2">
    <option value="4">
    <option value="6">
    <option value="8">

<label for="numbers">Choose a value:</label>
<input type="number" list="even-values" id="numbers"  />

Documentation / Reference

Powered by ComboStrap