Purpose and content model
Datalist supplies suggested values for a compatible input. The input's list attribute points to the datalist ID. Unlike a select, a datalist usually allows the user to enter a value that is not one of the suggestions. Choose it when suggestions are helpful but a closed set would be unnecessarily restrictive.
The container can hold option elements and, under its content model, suitable fallback phrasing content. The actual suggestion UI is provided by the browser and differs between input types and devices. Its appearance and behavior are not as freely controllable as an ordinary list of HTML elements.
Syntax and working example
<label for="city">City</label>
<input id="city" name="city" list="cities" autocomplete="address-level2">
<datalist id="cities">
<option value="Ahmedabad"></option>
<option value="Mumbai"></option>
<option value="Pune"></option>
</datalist>Supported attributes and behavior
Datalist uses global attributes, particularly id for association. Its options use value and may use label. The associated input retains its own name, type, required, pattern, and other applicable constraints. Suggestions do not bypass those constraints. Some input types use datalist differently, such as suggested ticks on a range control, so test the specific type rather than extrapolating from text input.
Another practical pattern
<label for="duration">Duration in minutes</label>
<input id="duration" name="duration" type="range" min="15" max="60" step="15" list="durations">
<datalist id="durations"><option value="15"></option><option value="30"></option><option value="60"></option></datalist>Accessibility and browser notes
Datalist has known usability and accessibility differences across browser and assistive-technology combinations. Do not make essential instructions available only in suggestions. For a controlled vocabulary, a select may be clearer; for a sophisticated accessible combobox, follow a complete tested interaction pattern rather than adding ARIA labels to an arbitrary popup.
Common mistakes
Do not assume choosing a suggestion is required. The server must still validate or normalize the submitted value. Do not use datalist for secrets or private records that should not be sent to the page. All option values are inspectable in source.
Verify your implementation
Test entering an unlisted value, choosing a suggestion with the keyboard, zooming, and using a screen reader. Check the behavior of the exact input type on mobile. Verify that validation errors explain the actual rule instead of vaguely requesting one of the hints.
Standard status and sources
Standard; browser availability must be checked independently of specification status.