How to Use the datalist Element

The HTML datalist element provides suggestions for an input. It helps people enter common values while still allowing them to type a value that is not in the list.

The answer first

Minimal example

<label for="browser">Browser</label>
<input id="browser" name="browser" list="browser-options">

<datalist id="browser-options">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

The value of input[list] matches the value of datalist[id], so the browser can offer the suggestions. The datalist itself is not normally shown as a list in the page.

When you focus the input, the browser may show a button or a suggestion list. Choosing a suggestion puts its value into the input; it does not stop you from typing another browser name.

datalist and select

Goal	Useful elements	Allowed input
Require a choice from prepared options	select + option	Choose from the available options
Show helpful values while accepting new input	input + datalist	Suggestions and values outside the list

For example, a fixed list of prefectures may be clearer as a select. A search field that suggests previous terms while allowing a new term can be a good use of datalist.

Writing suggestion values

The value of an option is the value placed in the input when the suggestion is chosen. Make the value explicit when it is important to your application.

<label for="country">Country</label>
<input id="country" name="country" list="countries">
<datalist id="countries">
  <option value="Japan" label="日本"></option>
  <option value="United States" label="アメリカ合衆国"></option>
</datalist>

Browsers can differ in how they show an option's label and how they open the suggestions. Do not put essential information only in label; make the value and the surrounding explanation useful on their own.

Making the input required or restricted

Adding a datalist does not make an input required and does not reject values outside the suggestions. Add the appropriate validation to the input, such as required or pattern.

<label for="ticket">Ticket number</label>
<input id="ticket" name="ticket" list="tickets"
       pattern="T-[0-9]{4}" required>
<datalist id="tickets">
  <option value="T-1024"></option>
  <option value="T-2048"></option>
</datalist>

This example offers suggestions while checking that the input is not empty and follows the T-four digits pattern. Validate the value on the server as well.

Keeping it readable and usable

• Associate a clear label with the input.
• Keep suggestions short and useful for completing the input.
• Do not use only a placeholder as the explanation of the field.
• Do not use datalist alone when the value must come from a fixed set.
• Check the suggestion UI, keyboard behavior, and assistive-technology experience in browsers.

Common mistakes

• The value of list does not match the datalist's id, so the elements are not connected.
• Using datalist as if it were a select, then assuming values outside the list are invalid.
• Leaving the value implicit instead of writing the application value in option value.
• Checking only the visual popup and not keyboard or assistive-technology access.

Check it in Atlas

For the datalist content model, suggestion conditions, the connection to input, the DOM API, browser behavior, and accessibility mappings, see the datalist element in Yugien Atlas. The input type and form-validation boundaries are covered by Atlas on input, and suggestion semantics by Atlas on option.