Path // www.yourhtmlsource.com → Reference → <datalist>

<datalist>

by Ross Shannon

The <datalist> element contains a set of <option> elements that provide predefined suggestions for an <input> element. Unlike <select>, which limits users to predefined choices, datalist offers suggestions while still allowing users to enter custom values. This creates an autocomplete-like experience that combines the flexibility of free text input with the convenience of predefined options.

Clock This page was last updated on 2025-11-17


Syntax

<input type="text" list="datalist-id">
<datalist id="datalist-id">
  <option value="Suggestion 1">
  <option value="Suggestion 2">
  <option value="Suggestion 3">
</datalist>

The element requires both opening and closing tags. It must have an id attribute that matches the list attribute of the associated input. The datalist contains <option> elements that define the suggestions.

Attributes

  • id (required) - Unique identifier that links to the input's list attribute
  • Global attributes - Supports standard attributes like class, style

The datalist itself is invisible - it only provides data to the associated input. The options within follow the same attributes as <option> in <select> elements.

Examples

Browser Suggestions

<label for="browser">Choose your browser:</label>
<input type="text" id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Email Domain Suggestions

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

Color Picker with Suggestions

<label for="color">Pick a color:</label>
<input type="color" id="color" name="color" list="color-options">
<datalist id="color-options">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
  <option value="#ffff00">
</datalist>

When to Use

Use the <datalist> element when:

  • Offering suggestions while allowing custom input
  • Creating autocomplete functionality for common values
  • Providing shortcuts for frequently entered data
  • Helping users discover valid options without restricting them
  • Implementing search suggestions or type-ahead features

Accessibility and best practices:

  • Always provide a label for the associated input
  • Ensure the input works without the datalist (graceful degradation)
  • Provide relevant and useful suggestions
  • Consider the order of options (most common first)
  • Test across different browsers (implementation varies)
  • Use with various input types: text, search, url, tel, email, number, range, color, date, time
  • Screen readers announce "with autocomplete" for inputs with datalist
  • Keep the number of suggestions manageable (not too many)
  • Consider dynamic datalists with JavaScript for complex scenarios
  • <input> - Form control that uses the datalist
  • <option> - Individual suggestions within datalist
  • <select> - Alternative for restricted choice lists
  • <form> - Parent form container
  • <label> - Labels for the input element

Comparison with select:

<!-- Select: User must choose from options -->
<select name="country">
  <option value="us">USA</option>
</select>

<!-- Datalist: User can choose OR type custom value -->
<input type="text" name="country" list="countries">
<datalist id="countries">
  <option value="USA">
</datalist>