Limited supportUseful when suggestions are helpful but must not restrict users to a fixed set of options.
Forms Limited support

<datalist>

The <datalist> element connects a text input to a browser-provided suggestion list. It helps users discover common values while still allowing free-form entry.

FormsSuggestionsInput

Overview

The <datalist> element connects a text input to a browser-provided suggestion list. It helps users discover common values while still allowing free-form entry.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<datalist>
20
12
4
12.1
33
12.2
HTML attribute
input_type_color

Support with `<input type="color">`
20
14
12.1
33
12.2
input_type_date

Support with `<input type="date">`
20
12
14.1
33
14.5
input_type_email

Support with `<input type="email">`
22
12
4
12.1
33
12.2
input_type_number

Support with `<input type="number">`
22
12
4
12.1
33
12.2
input_type_range

Support with `<input type="range">`
20
12
110
12.1
57
12.2
input_type_search

Support with `<input type="search">`
22
12
4
12.1
33
12.2
input_type_tel

Support with `<input type="tel">`
22
12
4
12.1
33
12.2
input_type_text

Support with `<input type="text">`
20
12
4
12.1
33
12.2
input_type_time

Support with `<input type="time">`
20
12
14.1
33
12.2
input_type_url

Support with `<input type="url">`
22
12
4
12.1
33
12.2
DOM API
HTMLDataListElement

The HTMLDataListElement interface provides special properties (beyond the HTMLElement object interface it also has available to it by inheritance) to manipulate elements and their content.
20
12
4
12.1
25
12.2
options

The options read-only property of the HTMLDataListElement interface returns an HTMLCollection of HTMLOptionElement elements contained in a datalist. The descendant option elements provide predefined options for the input control associated with the .
20
12
4
12.1
25
12.2
Other
html.elements.input.type_color.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
20
14
12.1
33
12.2
html.elements.input.type_date.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
20
12
14.1
33
14.5
html.elements.input.type_email.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
22
12
4
12.1
33
12.2
html.elements.input.type_number.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
22
12
29
12.1
33
12.2
html.elements.input.type_range.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
20
12
110
12.1
57
12.2
html.elements.input.type_search.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
22
12
4
12.1
33
12.2
html.elements.input.type_tel.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
22
12
4
12.1
33
12.2
html.elements.input.type_text.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
20
12
4
12.1
33
12.2
html.elements.input.type_time.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
20
12
14.1
33
12.2
html.elements.input.type_url.list

The value given to the list attribute should be the Element.id of a datalist element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users…
22
12
4
12.1
33
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<label for="browser">Select 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">
</option></option></option></option></datalist>

Live demo

basic o-tconpri-t

Input to auxlist provide.input and.. with datalist

PreviewFullscreen

programingword languageselection

selectionoption provide.input also possible. with datalist

PreviewFullscreen

usage with Multiplefield.

different datalist multiple. Inputfield to.

PreviewFullscreen

Use cases

  • City and office suggestions

    Suggest frequent values such as cities or office names while still letting users type something not in the list.

  • Technology pickers

    Offer common frameworks, languages, or tools without turning the field into a strict select menu.

Cautions

  • Datalist is not a full combobox replacement and gives limited control over styling and announcement behavior.
  • If the list is long or filtering behavior must be custom, a dedicated accessible combobox may be the better choice.

Accessibility

  • Always keep a visible label on the input so users know what kind of value is expected before suggestions appear.
  • Do not rely on the suggestion list alone to explain valid formats or requirements.

Related links

Powered by web-features