What is the <datalist> tag in HTML?

Definition of the <datalist> tag

The <datalist> tag is an HTML element that provides a list of predefined suggestions for an <input> form field. It creates what is called an autocomplete list, offering users suggested options while still allowing them to freely enter their own value.

Unlike the <select> tag which forces a choice among predefined options, <datalist> combines the freedom of a text field with the convenience of a suggestion list. It's a particularly useful element for improving user experience in your forms. If you want to master all HTML tags and create professional forms, discover our complete HTML course.

Basic syntax

To use the <datalist> tag, you need to link it to an <input> element via the list attribute. The unique identifier of your <datalist> must match the value of this attribute.

<input type="text" list="suggestions" name="city">
<datalist id="suggestions">
    <option value="New York">
    <option value="Los Angeles">
    <option value="Chicago">
    <option value="Houston">
    <option value="Phoenix">
</datalist>

In this example, when the user clicks on the input field, a dropdown list with suggested cities appears. The user can either choose an option or type their own city.

Attributes of the <datalist> tag

The <datalist> tag itself accepts few specific attributes, but it works in combination with the <option> elements that compose it.

Attributes of <option> elements

The <option> elements inside a <datalist> can use several attributes:

Practical examples

Suggestion list for an email field

You can suggest common email domains to facilitate input:

<label for="email">Email address:</label>
<input type="email" id="email" name="email" list="email-domains">
<datalist id="email-domains">
    <option value="@gmail.com">
    <option value="@outlook.com">
    <option value="@yahoo.com">
    <option value="@icloud.com">
    <option value="@hotmail.com">
</datalist>

When the user starts typing their email, domain suggestions appear to help them complete their input faster.

Using a descriptive label

You can add descriptive text to each option using the label attribute or by adding text between the tags:

<label for="browser">Choose your browser:</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
    <option value="Chrome" label="Google Chrome - Most popular">
    <option value="Firefox" label="Mozilla Firefox - Open source">
    <option value="Safari" label="Apple Safari - For Mac">
    <option value="Edge" label="Microsoft Edge - Windows">
    <option value="Opera" label="Opera - Built-in VPN">
</datalist>

Datalist with numeric values

The <datalist> tag also works with number or range type fields:

<label for="quantity">Quantity (suggestions):</label>
<input type="number" id="quantity" name="quantity" list="quantities" min="1" max="100">
<datalist id="quantities">
    <option value="5">
    <option value="10">
    <option value="25">
    <option value="50">
    <option value="100">
</datalist>

This technique is particularly useful for suggesting common values while allowing the user to enter any number within the allowed range.

Datalist with a range field

Used with a range type input, the <datalist> creates visual markers on the slider:

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" list="levels">
<datalist id="levels">
    <option value="0" label="Mute">
    <option value="25" label="Low">
    <option value="50" label="Medium">
    <option value="75" label="High">
    <option value="100" label="Maximum">
</datalist>

This combination displays tick marks on the slider, making it easier to select specific values.

Datalist with a color field

You can even use <datalist> with a color type input to suggest predefined colors:

<label for="color">Choose a color:</label>
<input type="color" id="color" name="color" list="palette">
<datalist id="palette">
    <option value="#FF5733">
    <option value="#33FF57">
    <option value="#3357FF">
    <option value="#FF33F5">
    <option value="#F5FF33">
</datalist>

Dynamic datalist with JavaScript

You can dynamically populate a <datalist> with JavaScript, which is ideal for API-based suggestions:

<label for="country">Search for a country:</label>
<input type="text" id="country" name="country" list="country-list">
<datalist id="country-list"></datalist>

<script>
const input = document.getElementById('country');
const datalist = document.getElementById('country-list');

const countries = ['France', 'Belgium', 'Switzerland', 'Canada', 'Germany', 'Spain', 'Italy', 'Portugal'];

input.addEventListener('input', function() {
    const value = this.value.toLowerCase();
    datalist.innerHTML = '';
    
    if (value.length > 0) {
        const suggestions = countries.filter(c => c.toLowerCase().includes(value));
        suggestions.forEach(suggestion => {
            const option = document.createElement('option');
            option.value = suggestion;
            datalist.appendChild(option);
        });
    }
});
</script>

This code dynamically filters suggestions based on what the user types, creating a customized autocomplete experience.

Differences between <datalist> and <select>

It's important to understand when to use <datalist> rather than <select>:

Browser compatibility

The <datalist> tag is well supported by modern browsers, but some differences exist:

Best practices

To get the most out of the <datalist> tag, follow these recommendations:

1. Limit the number of options

Avoid overloading your <datalist> with too many options. A list of 5 to 15 suggestions is generally ideal:

<!-- Good: concise list -->
<datalist id="languages">
    <option value="JavaScript">
    <option value="Python">
    <option value="PHP">
    <option value="Java">
    <option value="C++">
</datalist>

<!-- Avoid: list too long -->
<datalist id="all-languages">
    <!-- 200+ options... -->
</datalist>

2. Always use an associated label

For accessibility, always associate a <label> with your input field:

<label for="fruit">Your favorite fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">
<datalist id="fruits">
    <option value="Apple">
    <option value="Orange">
    <option value="Banana">
</datalist>

3. Provide a fallback solution

For browsers that don't support <datalist>, the input field will still work normally, without suggestions. You can also add a fallback solution:

<input type="text" id="sport" name="sport" list="sports">
<datalist id="sports">
    <option value="Football">
    <option value="Tennis">
    <option value="Basketball">
    <!-- Fallback text for older browsers -->
    or type your favorite sport
</datalist>

4. Validate on the server side

Never forget that <datalist> imposes no restrictions. The user can enter any value. Always validate data on the server side:

<form action="/process" method="POST">
    <label for="size">T-shirt size:</label>
    <input type="text" id="size" name="size" list="sizes" required>
    <datalist id="sizes">
        <option value="XS">
        <option value="S">
        <option value="M">
        <option value="L">
        <option value="XL">
    </datalist>
    <button type="submit">Submit</button>
</form>

5. Use unique identifiers

If you have multiple <datalist> elements on the same page, make sure each has a unique id:

<input type="text" list="departure-cities" placeholder="Departure city">
<datalist id="departure-cities">
    <option value="New York">
    <option value="Los Angeles">
</datalist>

<input type="text" list="arrival-cities" placeholder="Arrival city">
<datalist id="arrival-cities">
    <option value="Chicago">
    <option value="Miami">
</datalist>

Accessibility

The <datalist> tag is generally well supported by assistive technologies, but a few points deserve attention:

• Always associate a <label> with the input field
• Use the aria-describedby attribute if you add additional instructions
• Screen readers generally announce the presence of suggestions
• Test with different screen readers to ensure a good experience

<label for="job">Your job:</label>
<input type="text" id="job" name="job" list="jobs" aria-describedby="job-help">
<span id="job-help">Start typing to see suggestions</span>
<datalist id="jobs">
    <option value="Web Developer">
    <option value="UX Designer">
    <option value="Project Manager">
</datalist>

Frequently asked questions

No, the <datalist> tag does not allow forcing the user to choose a value from the suggestions. If you need this constraint, use the <select> tag instead. However, you can add custom JavaScript validation to check if the entered value is part of the list.

No, <datalist> works with most text input types (text, email, url, tel, search), as well as number, range, color, date, time, and datetime-local. However, it does not work with checkbox, radio, file, hidden, password, image, submit, reset, or button types.

Unfortunately, the <datalist> tag and its suggestions are very difficult to style with CSS because their appearance is controlled by the browser. You cannot reliably customize the colors, fonts, or dimensions of the dropdown list. If you need full control over the appearance, you will need to create a custom autocomplete component in JavaScript.

To master the <datalist> tag and all other HTML form elements, we recommend following our HTML course on Believemy. You will learn to create accessible, ergonomic, and professional forms, with many practical examples and exercises.