Form Control
HTML5
The datalist element provides a list of predefined options for an <input> element, creating an autocomplete dropdown. Users can either select from the list or type their own value.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="browser">Choose your browser:</label>
<input type="text" id="browser" name="browser"
list="browsers" placeholder="Type or select">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
</form>
< input type = " text " list = " datalist-id " >
< datalist id = " datalist-id " >
< option value = " Option 1 " >
< option value = " Option 2 " >
< option value = " Option 3 " >
Connect the input to the datalist using the input’s list attribute with the datalist’s id.
The <datalist> element has no specific attributes beyond the global attributes like id and class.
The id attribute is required to link it with an input element.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="city">City:</label>
<input type="text" id="city" name="city" list="cities"
placeholder="Enter city name">
<datalist id="cities">
<option value="New York">
<option value="Los Angeles">
<option value="Chicago">
<option value="Houston">
<option value="Phoenix">
<option value="Philadelphia">
<option value="San Antonio">
<option value="San Diego">
</datalist>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" list="email-domains"
placeholder="user@example.com">
<datalist id="email-domains">
<option value="@gmail.com">
<option value="@yahoo.com">
<option value="@outlook.com">
<option value="@hotmail.com">
<option value="@icloud.com">
</datalist>
<small>Start typing to see domain suggestions</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="website">Website:</label>
<input type="url" id="website" name="website" list="popular-sites"
placeholder="https://example.com">
<datalist id="popular-sites">
<option value="https://google.com">
<option value="https://github.com">
<option value="https://stackoverflow.com">
<option value="https://developer.mozilla.org">
<option value="https://w3.org">
</datalist>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="color">Pick a color:</label>
<input type="color" id="color" name="color" list="color-palette">
<datalist id="color-palette">
<option value="#ff0000">
<option value="#00ff00">
<option value="#0000ff">
<option value="#ffff00">
<option value="#ff00ff">
<option value="#00ffff">
</datalist>
<small>Use the picker or select a predefined color</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity"
list="quantities" min="0" max="100">
<datalist id="quantities">
<option value="1">
<option value="5">
<option value="10">
<option value="25">
<option value="50">
<option value="100">
</datalist>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="appointment">Appointment Date:</label>
<input type="date" id="appointment" name="appointment"
list="available-dates">
<datalist id="available-dates">
<option value="2024-12-20">
<option value="2024-12-21">
<option value="2024-12-23">
<option value="2024-12-27">
<option value="2024-12-30">
</datalist>
<small>Select from available dates or choose another</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="country-code">Country Code:</label>
<input type="text" id="country-code" name="code" list="codes">
<datalist id="codes">
<option value="+1" label="USA/Canada">
<option value="+44" label="United Kingdom">
<option value="+33" label="France">
<option value="+49" label="Germany">
<option value="+81" label="Japan">
<option value="+86" label="China">
</datalist>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="search">Search:</label>
<input type="search" id="search" name="q" list="recent-searches"
placeholder="Search...">
<datalist id="recent-searches">
<option value="JavaScript tutorials">
<option value="HTML forms guide">
<option value="CSS flexbox">
<option value="React components">
<option value="Python basics">
</datalist>
<button type="submit">Search</button>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="product">Product:</label>
<input type="text" id="product" name="product" list="products"
placeholder="Type to search products">
<datalist id="products"></datalist>
<button type="button" onclick="loadProducts()">Load Products</button>
</form>
<script>
function loadProducts() {
const products = [
'Laptop', 'Smartphone', 'Tablet',
'Headphones', 'Keyboard', 'Mouse',
'Monitor', 'Webcam', 'Microphone'
];
const datalist = document.getElementById('products');
datalist.innerHTML = '';
products.forEach(product => {
const option = document.createElement('option');
option.value = product;
datalist.appendChild(option);
});
}
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="skill">Programming Language:</label>
<input type="text" id="skill" name="skill"
placeholder="Start typing...">
<datalist id="skills"></datalist>
</form>
<script>
const allSkills = [
'JavaScript', 'Python', 'Java', 'C++', 'C#',
'Ruby', 'PHP', 'Swift', 'Kotlin', 'Go',
'Rust', 'TypeScript', 'Scala', 'Perl', 'R'
];
const input = document.getElementById('skill');
const datalist = document.getElementById('skills');
// Link input to datalist
input.setAttribute('list', 'skills');
// Populate initially
allSkills.forEach(skill => {
const option = document.createElement('option');
option.value = skill;
datalist.appendChild(option);
});
// Optional: Filter on input (browsers handle this natively)
input.addEventListener('input', (e) => {
const filter = e.target.value.toLowerCase();
datalist.innerHTML = '';
const filtered = allSkills.filter(s =>
s.toLowerCase().includes(filter)
);
filtered.forEach(skill => {
const option = document.createElement('option');
option.value = skill;
datalist.appendChild(option);
});
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="category">Category:</label>
<select id="category" name="category">
<option value="">Select category</option>
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
<option value="grains">Grains</option>
</select>
<label for="item">Item:</label>
<input type="text" id="item" name="item" list="items"
placeholder="Select category first">
<datalist id="items"></datalist>
</form>
<script>
const itemData = {
fruits: ['Apple', 'Banana', 'Orange', 'Grape'],
vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Tomato'],
grains: ['Rice', 'Wheat', 'Oats', 'Barley']
};
document.getElementById('category').addEventListener('change', (e) => {
const category = e.target.value;
const datalist = document.getElementById('items');
datalist.innerHTML = '';
if (category && itemData[category]) {
itemData[category].forEach(item => {
const option = document.createElement('option');
option.value = item;
datalist.appendChild(option);
});
}
});
</script>
<!-- Allow custom input + suggestions -->
< input type = " text " list = " countries " >
< datalist id = " countries " >
< option value = " United States " >
< option value = " United Kingdom " >
Use when: Users might need custom values, list is too long to scroll, or autocomplete/search behavior is desired.
<!-- Must choose from list -->
< option value = "" > Select country </ option >
< option value = " us " > United States </ option >
< option value = " uk " > United Kingdom </ option >
< option value = " ca " > Canada </ option >
Use when: Only predefined values are valid, limited number of options, or need to prevent custom input.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="browser-fb">Browser:</label>
<input type="text" id="browser-fb" name="browser" list="browsers-fb">
<datalist id="browsers-fb">
<!-- Fallback for older browsers -->
<label>or select:</label>
<select name="browser-select">
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Edge">Edge</option>
</select>
</datalist>
</form>
<p><small>
Browsers that support datalist show suggestions.
Older browsers show a select dropdown.
</small></p>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="lang">Programming Language:</label>
<input type="text" id="lang" name="language"
list="languages"
aria-describedby="lang-help">
<datalist id="languages">
<option value="JavaScript">
<option value="Python">
<option value="Java">
</datalist>
<small id="lang-help">
Start typing to see suggestions or enter your own
</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="company">Company (optional):</label>
<input type="text" id="company" name="company"
list="companies" placeholder="Type or select">
<datalist id="companies">
<option value="Google">
<option value="Microsoft">
<option value="Apple">
<option value="Amazon">
</datalist>
</form>
Datalist is fully keyboard accessible:
Type : Filters suggestionsArrow Down : Open/navigate suggestionsArrow Up/Down : Navigate through optionsEnter : Select highlighted optionEscape : Close suggestions
< option value = " New York " >
< option value = " Los Angeles " >
<!-- 10-50 suggestions work well -->
< option value = " Option 1 " >
< option value = " Option 2 " >
<!-- ... 20 more options -->
<!-- Hundreds of options = poor UX -->
For very large lists, consider server-side filtering or alternative UI patterns.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
list="username-suggestions"
aria-describedby="username-help">
<datalist id="username-suggestions">
<option value="john_doe">
<option value="jane_smith">
<option value="bob_jones">
</datalist>
<small id="username-help">
Available usernames are suggested. You can also create your own.
</small>
</form>
Browser Version Notes Chrome 20+ Full support Firefox 4+ Full support Safari 12.1+ Full support Edge 12+ Full support IE 10+ Partial support (limited styling)
