HTML <datalist> Element
The <datalist> element provides a collection of predefined suggestions for a form control. It is commonly connected to an <input> element so visitors can choose a suggested value while still being able to enter another value when the input type allows it.
Syntax
<input list="colors">
<datalist id="colors">
<option value="Blue">
<option value="Green">
<option value="Red">
</datalist>The list attribute on the <input> element must match the id of the <datalist> element. The <option> elements provide the suggested values.
Attributes
The <datalist> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
The following example provides a list of suggested web browsers while still allowing another browser name to be entered:
Usage Notes
The <datalist> element provides suggestions rather than a fixed set of choices. With a typical text input, visitors can select one of the suggested values or enter a different value.
A <datalist> is connected to a form control using the control's list attribute. The value of the list attribute must match the id assigned to the <datalist>.
The suggestions are normally created with <option> elements. Each option's value provides a value the browser can offer to the visitor.
Use a <select> element instead when visitors must choose from a fixed list and should not be able to enter a value outside the available options.
Accessibility
Form controls connected to a <datalist> should still have a clear <label> that describes the information the visitor is expected to enter.
The appearance and accessibility of the suggestion list can vary between browsers and assistive technologies. Do not rely on the suggestions alone to communicate instructions, requirements, or other essential information.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <datalist> Element .
Related Elements
<input> - Creates an interactive form control that can use a datalist for suggested values.
<option> - Defines a suggested value within a datalist.
<select> - Provides a control for choosing from a predefined list of options.
<label> - Provides a text label for a form control.