HTML Datalists

Understanding HTML Datalists

The HTML <datalist> element provides a list of suggested values for an associated input control.

Unlike a select menu, a datalist does not restrict the user to the listed choices. Users can select one of the suggestions or enter a different value directly into the input field.

The <datalist> Element

The <datalist> element contains a set of suggested values that can be associated with certain <input> elements.

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

The datalist itself is not displayed as a normal form control. Its options become suggestions for an input connected to it.

Connecting a Datalist to an Input

An input is connected to a datalist using the input's list attribute and the datalist's matching id value.

<label for="datalist-input">Browser:</label>
<input list="browsers" id="datalist-input" name="browser">

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

In this example, list="browsers" connects the input to id="browsers".

Datalist Options

Each suggestion inside a datalist is defined with an <option> element. The value attribute contains the value offered to the user.

<option value="Firefox"></option>

For tutorial consistency, each option is written with an explicit closing </option> tag.

Datalist vs Select Menu

A datalist and a select menu both provide predefined choices, but they behave differently.

A <select> element normally requires the user to choose one of its listed options. An input connected to a <datalist> can suggest values while still allowing the user to type something else.

<!-- Select menu: choose from the listed options -->
<select name="browser">
  <option value="Chrome">Chrome</option>
  <option value="Firefox">Firefox</option>
</select>

<!-- Datalist: suggestions plus custom input -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
</datalist>

Allowing Custom Values

The suggestions in a datalist do not automatically limit the input to those values. A user can usually type any value accepted by the associated input control.

<input list="browsers" id="browser" name="browser">

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

This makes datalists useful when common choices can be suggested but other answers are also valid.

Datalist Example

The following example uses the browser datalist from the master form. Select one of the suggested browsers or type another browser name to see how the control differs from a select menu.

Datalist Best Practices

• Use a datalist when suggested values are helpful but users should still be allowed to enter another value.
• Connect the input and datalist with matching list and id values.
• Provide a clear visible label for the associated input.
• Use concise and meaningful option values.
• Do not use a datalist when users must be restricted to a fixed set of choices; a select menu or other appropriate control is usually better.
• Explicitly close each <option> element for consistent tutorial markup.

Summary

The <datalist> element supplies suggested values for an associated input. The input's list attribute connects it to the datalist's id, while <option> elements define the suggestions.

Unlike a select menu, a datalist normally allows users to choose a suggestion or enter their own value.