Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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
| Component | Purpose |
|---|---|
list="id" on input | Points 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.
Text input with datalist
<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.
Labeled suggestions
<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.
Email suggestions
<label for="contact-email">Email</label><input type="email" id="contact-email" name="email" list="email-suggestions" /> <datalist id="email-suggestions"> <option value="[email protected]" /> <option value="[email protected]" /> <option value="[email protected]" /></datalist>URL Suggestions
On type="url", the datalist can suggest common URLs. The browser still validates that the final value is a valid URL.
URL suggestions
<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.
Number suggestions
<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).
Range with tick marks
<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.
Dynamic datalist
<label for="city">City</label><input type="text" id="city" name="city" list="city-suggestions" /><datalist id="city-suggestions"></datalist>Populate from API
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
listattribute does not work ontype="hidden",type="password",type="checkbox",type="radio",type="file", ortype="image". - There is no event fired when the user selects an option from the datalist. You must listen for
inputorchangeevents 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 datamultiple— accept multiple values in one field<select>— constrained choice from a fixed set<input>element reference