← Back to All Tags

<datalist>

Specifies a list of pre-defined options for input controls

✨ HTML5

Definition and Usage

The <datalist> element specifies a list of pre-defined options for an <input> element.

The <datalist> tag provides an autocomplete feature for input elements. Users will see a drop-down list of pre-defined options as they input data.

The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

Tip: The <datalist> element is different from <select>. It allows users to enter custom values in addition to the suggested options.
Note: The <datalist> tag is not supported in Safari versions before 12.1.

Browser Support

The <datalist> tag is supported in all major browsers:

Chrome
Chrome
20.0+
Firefox
Firefox
4.0+
Safari
Safari
12.1+
Edge
Edge
10.0+
Opera
Opera
10.0+

Attributes

The <datalist> tag requires a unique id attribute to link with the input's list attribute.

The <datalist> tag also supports the Global Attributes in HTML.

The <datalist> tag also supports the Event Attributes in HTML.

Examples

Basic Datalist

Create a simple autocomplete input:

Example

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Search Suggestions

Create a search input with suggestions:

Example

<label for="search">Search:</label>
<input type="text" list="search-suggestions" id="search" placeholder="Start typing...">

<datalist id="search-suggestions">
  <option value="HTML Tutorial">
  <option value="CSS Tutorial">
  <option value="JavaScript Tutorial">
  <option value="Python Tutorial">
  <option value="React Tutorial">
</datalist>

Email Domains

Suggest common email domains:

Example

<label for="email">Email:</label>
<input type="email" list="email-domains" id="email" placeholder="your@email.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>

Countries List

Create a country selector with autocomplete:

Example

<label for="country">Country:</label>
<input list="countries" id="country" name="country">

<datalist id="countries">
  <option value="United States">
  <option value="United Kingdom">
  <option value="Canada">
  <option value="Australia">
  <option value="Germany">
  <option value="France">
  <option value="Japan">
  <option value="India">
</datalist>

Color Picker with Suggestions

Combine color input with suggested colors:

Example

<label for="color">Choose a color:</label>
<input type="color" list="colors" id="color">

<datalist id="colors">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
  <option value="#ffff00">
  <option value="#ff00ff">
  <option value="#00ffff">
</datalist>

Options with Descriptions

Add labels to provide additional information:

Example

<label for="language">Programming Language:</label>
<input list="languages" id="language" name="language">

<datalist id="languages">
  <option value="JavaScript">Most popular for web development</option>
  <option value="Python">Great for beginners and data science</option>
  <option value="Java">Enterprise applications</option>
  <option value="C++">Systems programming</option>
  <option value="Ruby">Web applications with Rails</option>
</datalist>

Custom Values Allowed

Users can enter values not in the list:

Example

<label for="city">City:</label>
<input list="cities" id="city" placeholder="Enter or select a city">

<datalist id="cities">
  <option value="New York">
  <option value="Los Angeles">
  <option value="Chicago">
  <option value="Houston">
</datalist>

<p><em>You can also type any city name not in the list.</em></p>

Complete Form Example

Use multiple datalists in a form:

Example

<form>
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name" required>
  </p>

  <p>
    <label for="skill">Skill Level:</label>
    <input list="skills" id="skill">
    <datalist id="skills">
      <option value="Beginner">
      <option value="Intermediate">
      <option value="Advanced">
      <option value="Expert">
    </datalist>
  </p>

  <p>
    <label for="framework">Framework:</label>
    <input list="frameworks" id="framework">
    <datalist id="frameworks">
      <option value="React">
      <option value="Vue">
      <option value="Angular">
      <option value="Svelte">
    </datalist>
  </p>

  <button type="submit">Submit</button>
</form>

Datalist vs Select Dropdown

  • <datalist>: Provides suggestions but allows custom input. Users can type any value.
  • <select>: Restricts choices to predefined options only. Users must select from the list.

Comparison Example

<!-- Datalist: Flexible (suggestions + custom) -->
<label for="car1">Datalist (can type anything):</label>
<input list="cars" id="car1">
<datalist id="cars">
  <option value="Tesla">
  <option value="BMW">
  <option value="Audi">
</datalist>

<!-- Select: Restricted (predefined only) -->
<label for="car2">Select (must choose from list):</label>
<select id="car2">
  <option value="Tesla">Tesla</option>
  <option value="BMW">BMW</option>
  <option value="Audi">Audi</option>
</select>

Accessibility Features

  • Always use <label> elements with datalist inputs for screen readers
  • The datalist provides autocomplete functionality that works with keyboard navigation
  • Users can press arrow keys to navigate through suggestions
  • Supports ARIA attributes for enhanced accessibility
  • Works well with screen readers that announce available options
Accessibility Tip: Ensure the id on the datalist matches the list attribute on the input for proper accessibility.

Try it Yourself

Interactive Example

Here's a live example of a datalist:

Try typing "Ch" or click the dropdown arrow to see suggestions

Best Practices

  • Always give the datalist a unique id attribute
  • Link the input's list attribute to the datalist's id
  • Use datalist when you want to suggest options but allow custom input
  • Use <select> when you need to restrict choices to predefined options
  • Provide clear labels for better user experience
  • Keep option lists manageable (not too many options)
  • Consider fallback for browsers that don't support datalist (Safari < 12.1)
  • Test with keyboard navigation to ensure accessibility

Use Cases

  • Search boxes with common search queries
  • Location inputs (cities, countries, addresses)
  • Email domain suggestions
  • Product names or categories in e-commerce
  • Programming languages, frameworks, or technologies
  • Color schemes or themes
  • Tag input with suggested tags
  • Any input where suggestions improve user experience

Default CSS Settings

Most browsers will display the <datalist> element with the following default values:

Default CSS

datalist {
  display: none;
}

Note: The datalist itself is not visible; it only provides suggestions for the linked input element.

Related Tags