HTML datalist elements provide a list of suggested values for an input field. They help users enter information more quickly by displaying suggestions as they type. The <datalist> element is useful for search forms, location fields, product selection, and other forms where users may benefit from predefined suggestions.
What Is an HTML Datalist?
An HTML datalist creates a list of suggestions that can be associated with an input element. Unlike a standard dropdown, users can generally type their own values instead of being limited to the listed options.
For example, a job application form can suggest common programming languages such as Java, Python, JavaScript, and PHP.
To understand input fields, explore HTML Input and HTML Input Types.
HTML Datalist Example
The following example demonstrates how to create an input field with suggestions.
<form>
<label for="browser">Choose a Browser:</label>
<input
type="text"
id="browser"
name="browser"
list="browsers"
placeholder="Start typing..."
>
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
</datalist>
<button type="submit">Submit</button>
</form>In this example:
<input>creates the text field.list="browsers"connects the input to the datalist.<datalist id="browsers">defines the suggestion list.- Each
<option>provides a suggested value. <button type="submit">submits the form.
When users type into the input field, the browser may display matching suggestions.
Important Features of HTML Datalist
The datalist element offers several useful features.
- Suggestions: Displays predefined values that users can choose from.
- Custom input: Generally allows users to enter values that are not in the suggestion list.
- Reusable options: A datalist can provide suggestions to multiple compatible inputs when they reference the same ID.
- Flexible input types: It can be associated with supported input types, including text, search, URL, email, number, range, and date-related inputs, depending on browser support.
The id of the datalist must match the input’s list attribute.
Learn more about HTML Form Elements and HTML Form Attributes.
Using Datalist for Location Suggestions
A datalist can suggest locations while allowing users to type a different location.
<label for="city">Choose Your City:</label>
<input type="text" id="city" name="city" list="cities">
<datalist id="cities">
<option value="Hyderabad">
<option value="Vijayawada">
<option value="Visakhapatnam">
<option value="Bengaluru">
<option value="Chennai">
</datalist>Users can select one of the suggested cities or enter another city manually. The datalist does not automatically retrieve locations from a database; the suggestions in this example are predefined in the HTML.
Using Datalist with a Number Input
A datalist can also provide suggested numeric values.
<label for="salary">Expected Salary (LPA):</label>
<input type="number" id="salary" name="salary" list="salary-options">
<datalist id="salary-options">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
<option value="8">
</datalist>This example suggests salary values such as 3, 4, 5, 6, and 8 LPA. Users may enter other valid numbers as well, subject to the input’s constraints.
HTML Datalist vs Select
Both datalist and select elements provide predefined choices, but they behave differently.
A <select> element presents a list of options and normally restricts selection to those options. A <datalist> provides suggestions for an associated input, generally allowing users to enter other values.
Use a select element when users must choose from a fixed set of options. Use a datalist when suggestions are helpful but custom input should remain possible.
Explore HTML Select to learn more about dropdown menus.
Frequently Asked Questions
Does a datalist restrict users to the listed options?
No. A datalist generally provides suggestions rather than enforcing a fixed set of allowed values.
Can I use datalist with a text input?
Yes. A text input can use the list attribute to reference a datalist by its ID.
Can I use CSS to style datalist suggestions?
The browser controls the appearance of the native suggestion popup, so styling it directly is limited and inconsistent across browsers.
Does datalist work on mobile devices?
Support is available in modern browsers, but the appearance and behavior of suggestions can vary between browsers and devices.