HTML list Attribute

Introduction

The list attribute is an HTML feature that connects an <input> element to a <datalist> element. It provides a predefined set of autocomplete suggestions while still letting users type their own value. This is not related to <ul> or <ol> bullet lists—those are separate elements with no list attribute.

What You’ll Learn

Purpose of list

The primary purpose of the list attribute is to associate an <input> with a set of predefined options defined in a <datalist>. Users see matching suggestions as they type, which speeds up data entry and reduces typos on common values like countries, colors, or product names.

Unlike a <select> dropdown, the user is not limited to the suggested values—they can submit any text that fits the input’s validation rules.

📝 Syntax

Point the input’s list attribute at the id of a <datalist>:

<label for="fruit">Select a fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">

<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
  <option value="Grapes">
  <option value="Strawberry">
</datalist>

Syntax Rules

• Valid on <input> elements (text, search, url, tel, email, number, etc.).
• Value is the id of a <datalist> in the document—no # prefix.
• The datalist id must be unique and must match the list value exactly.
• Each suggestion is an <option value="..."> inside the datalist.
• Users can pick a suggestion or type a value not in the list (unless other validation blocks it).
• In JavaScript, input.list returns the linked HTMLDataListElement.

💎 Values

The list attribute accepts a single token: the id of a <datalist> element.

• list="fruits" — Links to <datalist id="fruits">.
• list="countries" — Another datalist for a different input.
• Invalid or missing id — No suggestions appear; input still works as plain text.

Update the association in JavaScript:

document.getElementById("dynamicInput").setAttribute("list", "vegetables");
// or: input.list = document.getElementById("vegetables");

Applicable Elements

list + datalist vs <select>

Examples Gallery

Fruit autocomplete, switching between two datalists, and updating list with JavaScript.

<label for="fruit">Select a Fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">

<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
  <option value="Grapes">
  <option value="Strawberry">
</datalist>

<input id="food" list="fruits" placeholder="Pick a food">
<button type="button" id="useVeg">Use vegetables list</button>

<datalist id="fruits">…</datalist>
<datalist id="vegetables">…</datalist>

<script>
  document.getElementById("useVeg").onclick = function () {
    document.getElementById("food").setAttribute("list", "vegetables");
  };
</script>

function updateListAttribute(category) {
  var input = document.getElementById("dynamicInput");
  input.setAttribute("list", category === "veg" ? "vegetables" : "fruits");
}

♿ Accessibility

• Always pair with <label> — Use for matching the input id so screen readers announce the field purpose.
• Datalist support varies — Some assistive tech exposes suggestions inconsistently; do not rely on datalist alone for critical validation.
• Validate server-side — Users can submit values outside the suggestion list.
• Provide clear instructions — Hint text helps users know they can type or pick a suggestion.
• Use select when choice must be restricted — For required fixed options, a select is more predictable for accessibility.

💡 Best Practices