0%

<datalist> Data list

Suggested values for an input; people can still type whatever they like.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<datalist> holds <option> elements that an input offers as suggestions. To connect the two, give the datalist an id and the input a list attribute with the same value.

A select restricts the answer. A datalist does not, and any value can still be typed. It works with text, search, email, url, number, range, date and color inputs, and the datalist itself never appears on the page.

How the list attribute ties it to an input is explained in the datalist element in the WHATWG standard (opens in a new tab). Compare it with the select element.

Syntax

<input list="ideas" name="name">
<datalist id="ideas">
  <option value="Suggestion"></option>
</datalist>

When to use it

Some fields have predictable common answers yet must accept anything: a job title, a city, a coffee order, a tag on a blog post. That is where <datalist> fits. If people see their answer in the list, one tap picks it. Everyone else keeps typing.

A datalist never restricts the value. When only listed values are allowed, like the shipping countries your store supports, use a select or radio buttons, and have the server validate whatever arrives anyway. With a handful of options, radio buttons are still the best choice, since all of them are visible without typing.

Non-text inputs can use a datalist too. On type="range" the options may show up as tick marks at the suggested points, and some browsers turn them into preset swatches on type="color". Count these as extras. Browsers also filter suggestions in different ways: some match the start of the text, others any part of it. Do not build anything that depends on one order or match rule.

Live example

Edit the code and watch the preview.

<label for="browser">Your browser</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Edge"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

More examples

Range slider with tick marks

This volume slider gets five suggested points from a datalist. Where the browser supports it, tick marks appear at those values. Elsewhere you see a plain slider that works exactly the same.

<form>
  <label for="vol">Volume</label>
  <input type="range" id="vol" name="volume" min="0" max="100" step="5" list="marks">
  <datalist id="marks">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
  <button>Save</button>
</form>

Brand color swatches

Link a color input to a datalist and supporting browsers offer the brand colors as presets. Any other color can still be picked. The list is a shortcut and sets no limit.

<form>
  <label for="accent">Accent color</label>
  <input type="color" id="accent" name="accent" value="#3366cc" list="brand">
  <datalist id="brand">
    <option value="#3366cc"></option>
    <option value="#cc3333"></option>
    <option value="#2e8b57"></option>
  </datalist>
  <button>Apply</button>
</form>

Tip: Make the input's list equal the datalist's id.

Browser support

datalist is in the HTML Living Standard and works with text-like inputs in all current desktop browsers. Some mobile browsers handle it less well, as do range and color inputs, and you cannot style the suggestion popup. See datalist support (opens in a new tab) before you rely on it. The input works fine with no suggestions at all, so adding one carries no risk.

Accessibility

Screen readers handle datalist suggestions inconsistently. The input must work fully by typing alone and have a clear label. How suggestion lists should behave is described in the W3C combobox pattern (opens in a new tab).

Common mistakes

Wrong

<input list="#cities">
<datalist id="cities">...</datalist>

Right

<input list="cities">
<datalist id="cities">...</datalist>

Write the id in list with no hash.

Frequently asked questions

What is the difference between datalist and select?

A <select> restricts users to the options listed. A <datalist> only suggests values for an <input>, and users can type anything else. Link them with an id on the datalist and a matching list attribute on the input. Choose datalist when free text is fine but you can suggest the common answers.

Can I style the datalist dropdown?

No. The browser draws the suggestion popup, CSS cannot reach it, and it looks different across browsers and devices. A fully styled autocomplete means building a custom combobox with JavaScript and ARIA, and making that accessible is a lot more work. Can I use (opens in a new tab) tracks browser support.

Related forms elements

<form>Wraps the controls whose values get sent to a server.<label>Names a form control; clicking the label focuses the control.<input>All-purpose form control; type picks text, email, number, checkbox, date and more.<button>A button that submits a form, resets it or runs some command.<select>A drop-down menu of options.<option>A single choice in a select, datalist or optgroup.<optgroup>Puts related options in a select under one label.<textarea>A multi-line field for longer input such as messages.<fieldset>Groups related form controls and names them with a legend.<legend>Names a fieldset and must come first inside it.<output>Displays the result of a calculation or a user action.<progress>Shows how far along a task is, like a file download.<meter>A gauge for a value inside a known range, such as battery level.