HTML list Attribute

The HTML list attribute associates an <input> element with a <datalist> element that provides a collection of suggested values for the user.

Elements That Use the list Attribute

The list attribute is used with the <input> element to associate the control with a <datalist> containing suggested values.

Element	Description
`<input>`	Associates an input control with a `<datalist>` element containing suggested values.

How list Works

The list attribute connects an <input> to a <datalist>. The value of list must match the id of the <datalist> element.

<label for="browser">Choose a browser:</label>
<input type="text" id="browser" name="browser" list="browser-list">

<datalist id="browser-list">
  <option value="Chrome"></option>
  <option value="Edge"></option>
  <option value="Firefox"></option>
</datalist>

When the user interacts with the input, the browser can display the values from the associated <datalist> as suggestions.

list Value

The value of the list attribute is the id of a <datalist> element in the same document.

<input type="text" list="plant-list">

<datalist id="plant-list">
  ...
</datalist>

If the value does not identify a <datalist> element in the document, no list of suggestions is associated with the input.

Supported Input Types

The list attribute can be used with many <input> types, including text-based controls and several specialized input types.

Input Type	Use
`text`	Provides suggested text values.
`search`	Provides suggested search terms.
`url`	Provides suggested URLs.
`tel`	Provides suggested telephone numbers.
`email`	Provides suggested email addresses.
`date`	Provides suggested dates where supported.
`month`	Provides suggested month and year values where supported.
`week`	Provides suggested week values where supported.
`time`	Provides suggested time values where supported.
`datetime-local`	Provides suggested local date and time values where supported.
`number`	Provides suggested numeric values.
`range`	Can provide suggested values that may be represented as marks on the range control.
`color`	Provides suggested colors where supported.

The list attribute does not apply to the hidden, password, checkbox, radio, file, submit, image, reset, or button input types.

Suggestions vs. Required Choices

A <datalist> provides suggestions rather than limiting the user to a fixed set of choices. For input types that allow free-form values, the user can normally enter a valid value that is not included in the list.

<input type="text" list="colors">

<datalist id="colors">
  <option value="Red"></option>
  <option value="Green"></option>
  <option value="Blue"></option>
</datalist>

If the user must choose from a fixed collection of options, a <select> element is generally more appropriate.

Common Mistakes

Do not include # before the <datalist> ID. Use list="plant-list", not list="#plant-list".

Make sure the list value exactly matches the id of the intended <datalist> element.

Do not use a <datalist> when the user must select one of the provided choices. The values are suggestions and do not automatically restrict free-form input.

Do not assume every input type has identical <datalist> behavior in every browser. Support for specialized controls such as date, time, range, and color can vary.

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.

The list attribute is widely supported for established <input> types, but compatibility can vary by input type and by how the browser presents datalist suggestions.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the list Attribute

The example associates a text input with a <datalist> containing several browser names. Select a suggestion or enter another browser name.

Play in Editor

Summary

The HTML list attribute associates an <input> element with a <datalist> containing suggested values. Its value must match the id of the <datalist> element. The suggestions can make data entry easier without necessarily restricting the user to the values in the list.