HTMLInputElement: list property

{{ApiRef("HTML DOM")}}

The list read-only property of the {{domxref("HTMLInputElement")}} interface returns the {{domxref("HTMLDataListElement")}} pointed to by the list attribute of the element, or null if the list attribute is not defined or the list attribute's value is not associated with any <datalist> in the same tree.

[!NOTE] This is a read-only property. To associate a <datalist> with an element, set the value of the list attribute with {{domxref("Element.setAttribute", "setAttribute()")}}.

Value

An {{domxref("HTMLDataListElement")}} or null.

Example

Given the following HTML:

<label for="planet">Which planet are you from?</label>
<input id="planet" type="text" list="superhero" />
<datalist id="superhero">
  <option value="Azarath"></option>
  <option value="Krypton"></option>
  <option value="Tamaran"></option>
</datalist>

You can retrieve the <datalist> element associated with the <input>:

const inputElement = document.querySelector("#planet");
console.log(inputElement.list); // returns the superhero HTMLDatalistElement

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{domxref("HTMLInputElement.value")}}
• {{domxref("HTMLInputElement.type")}}
• {{domxref("HTMLDataListElement")}}
• {{domxref("HTMLOptionElement")}}
• {{domxref("HTMLCollection")}}
• {{htmlelement("input")}}
• {{htmlelement("datalist")}}
• {{htmlelement("option")}}