list

Connects an input to a datalist of suggestions. The browser provides autocomplete-style filtering without any JavaScript.

Overview

The list attribute connects an <input> to a <datalist> element that provides a set of suggested values. The browser shows these suggestions as a dropdown that filters as the user types. Unlike a <select>, the user can still type a value that is not in the list.

This is the native HTML autocomplete/typeahead — no JavaScript required for the basic behavior.

Applies to: <input> (most types)

Values

ComponentPurpose
list="id" on inputPoints to the <datalist> by its id
<datalist id="id">Contains <option> elements with suggested values
<option value="...">Each suggestion. The value is what gets filled in.

Basic Text Suggestions

The simplest pattern: a text input with a list of suggestions. The browser filters options as the user types, matching against the value attribute.

<label for="fruit">Favorite Fruit</label> <input type="text" id="fruit" name="fruit" list="fruit-options" /> <datalist id="fruit-options"> <option value="Apple" /> <option value="Banana" /> <option value="Cherry" /> <option value="Grape" /> <option value="Mango" /> <option value="Orange" /> <option value="Peach" /> <option value="Strawberry" /> </datalist>

The user can select from the list or type any value they want. The list is a suggestion, not a constraint.

Labels and Values

Options can have inner text that serves as a visible label. The value attribute is what gets submitted. Some browsers show both the label and value in the dropdown.

<label for="browser">Browser</label> <input type="text" id="browser" name="browser" list="browsers" /> <datalist id="browsers"> <option value="chrome">Google Chrome</option> <option value="firefox">Mozilla Firefox</option> <option value="safari">Apple Safari</option> <option value="edge">Microsoft Edge</option> </datalist> <!-- The inner text is shown as a label; the value is submitted -->

Email Suggestions

On type="email", the datalist provides email address suggestions. This is useful for fields where the user frequently enters the same addresses.

<label for="contact-email">Email</label> <input type="email" id="contact-email" name="email" list="email-suggestions" /> <datalist id="email-suggestions"> <option value="work@company.com" /> <option value="personal@gmail.com" /> <option value="shared@team.io" /> </datalist>

URL Suggestions

On type="url", the datalist can suggest common URLs. The browser still validates that the final value is a valid URL.

<label for="website">Website</label> <input type="url" id="website" name="url" list="url-suggestions" placeholder="https://..." /> <datalist id="url-suggestions"> <option value="https://github.com" /> <option value="https://stackoverflow.com" /> <option value="https://developer.mozilla.org" /> </datalist>

Number Suggestions

On type="number", the datalist suggests specific numeric values. The user can still type any number within the min/max range.

<label for="rating">Rating (1-10)</label> <input type="number" id="rating" name="rating" min="1" max="10" list="rating-options" /> <datalist id="rating-options"> <option value="1" /> <option value="5" /> <option value="10" /> </datalist>

Range Tick Marks

On type="range", the datalist creates visible tick marks on the slider track. The label attribute on options may be displayed as tick labels (browser support varies).

<label for="volume">Volume</label> <input type="range" id="volume" name="volume" min="0" max="100" step="1" list="volume-ticks" /> <datalist id="volume-ticks"> <option value="0" label="Mute" /> <option value="25" label="Low" /> <option value="50" label="Medium" /> <option value="75" label="High" /> <option value="100" label="Max" /> </datalist>

This is one of the most underused native features. Tick marks turn a plain slider into a meaningful control with visible reference points — no JavaScript needed.

Dynamic Suggestions

Populate the datalist dynamically with JavaScript for server-driven autocomplete. The browser automatically picks up new options added to the datalist.

<label for="city">City</label> <input type="text" id="city" name="city" list="city-suggestions" /> <datalist id="city-suggestions"></datalist> const input = document.querySelector('#city'); const datalist = document.querySelector('#city-suggestions'); input.addEventListener('input', async () => { if (input.value.length < 2) return; const response = await fetch(`/api/cities?q=${input.value}`); const cities = await response.json(); datalist.innerHTML = cities .map(city => `<option value="${city.name}" />`) .join(''); });

Accessibility

  • Screen readers announce datalist-connected inputs as having suggestions. Users can arrow through options.
  • The datalist does not replace a <label>. Always provide a visible label for the input.
  • Since the user can type values not in the list, datalist is better for suggestions than for constrained choices. Use <select> when the user must pick from a fixed set.
  • Keyboard navigation: Arrow Down opens the suggestion list, arrow keys navigate, Enter selects.

Limitations

  • Datalist rendering varies significantly across browsers. Chrome shows a dropdown below the input, Firefox shows inline suggestions, and Safari has historically had limited support.
  • You cannot style the datalist dropdown with CSS. The appearance is entirely controlled by the browser.
  • The list attribute does not work on type="hidden", type="password", type="checkbox", type="radio", type="file", or type="image".
  • There is no event fired when the user selects an option from the datalist. You must listen for input or change events on the input itself.
  • Filtering logic is browser-controlled. You cannot customize whether matching is case-sensitive, starts-with, or contains.
  • On mobile browsers, datalist support and UX can be inconsistent. Test on your target devices.

See Also

  • autocomplete — browser autofill for personal data
  • multiple — accept multiple values in one field
  • <select> — constrained choice from a fixed set
  • <input> element reference