htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<datalist>

Specifies a list of pre-defined options for input controls

✨ HTML5

Quick Answer

What is the HTML <datalist> tag?

The <datalist> tag provides an autocomplete dropdown list for <input> elements. It contains <option> elements with suggested values. Users can either select from the list or type custom values. Link it to an input using matching id and list attributes, creating a user-friendly autocomplete feature.

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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

datalist {
  display: none;
}

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

Related Tags