<datalist> supplies suggestions for an input. The input’s list attribute refers to the datalist’s id. It does not constrain the input to the listed values.
A working example
HTML and CSS
HTML
<label for="topic">Topic</label
><input id="topic" name="topic" list="topics" /><datalist id="topics">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="Accessibility"></option>
</datalist>CSS
/* Optional presentation */
label {
display: block;
margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
font: inherit;
max-width: 100%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Use it in a form
Type the beginning of a suggestion, then try a value that is not in the list. Both can remain valid text. Use select when a choice must come from a fixed set.
Common mistakes and accessibility
Suggestions, zoom behavior, and assistive-technology support differ across browsers. Keep the label and instructions available without the popup, and test the relevant combinations. Datalist is not a complete custom accessible autocomplete widget.
Continue with input for the related behavior.
Sources and browser support
MDN: datalist describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.