datalists are more powerful than you think

by Alexis Degryse published on Dec 29, 2024

I think we all know the <datalist> element (and if you don’t, it’s ok). It holds a list of <option> elements, offering suggested choices for its associated input field.

It’s not an alternative for the <select> element. A field associated to a <datalist> can still allow any value that is not listed in the <option> elements.

Here is a basic example:

Pretty cool, isn't it? But what happens if we combine <datalist> with less common field types, like color and date:

<label for="favorite-color">What is your favorite color?</label>
<input type="color" list="colors-list" id="favorite-color">
<datalist id="colors-list">
  <option>#FF0000</option>
  <option>#FFA500</option>
  <option>#FFFF00</option>
  <option>#008000</option>
  <option>#0000FF</option>
  <option>#800080</option>
  <option>#FFC0CB</option>
  <option>#FFFFFF</option>
  <option>#000000</option>
</datalist>

Colors listed in <datalist> are pre-selectable but the color picker is still usable by users if they need to choose a more specific one.

  <label for="event-choice" class="form-label col-form-label-lg">Choose a historical date</label>
  <input type="date" list="events" id="event-choice">
  <datalist id="events">
    <option label="Fall of the Berlin wall">1989-11-09</option>
    <option label="Maastricht Treaty">1992-02-07</option>
    <option label="Brexit Referendum">2016-06-23</option>
  </datalist>

Same here: some dates are pre-selectable and the datepicker is still available.

Depending on the context, having pre-defined values can possibly speed up the form filling by users.

Please, note that <datalist> should be seen as a progressive enhancement because of some points:

• For Firefox (tested on 133), the <datalist> element is compatible only with textual field types (think about text, url, tel, email, number). There is no support for color, date and time.
• For Safari (tested on 15.6), it has support for color, but not for date and time.
• With some screen reader/browser combinations there are issues. For example, suggestions are not announced in Safari and it's not possible to navigate to the datalist with the down arrow key (until you type something matched with suggestions). Refer to a11ysupport.io for more.

Find out more

• datalist experiment by Eiji Kitamura
• Documentation on MDN

About Alexis Degryse

I'm a french UI Developer / Accessibility referent, and work at Astek, based in Lille, France. . I’m in charge of technical support of all topics related to web quality assurance (eco-conception, accessibility, privacy, SEO, responsive, ergonomics, etc.).
I’m really into HTML & CSS. Those languages, which are - as I like to say - easy to learn but hard to master, are my daily tools and constitute the main thread of my self-learning.
I do my best to keep my skills updated in order to always provide the most suitable solutions for any project and give best advices about the implications and feasibility of UI ideas.
Oh ! And I love CSS drawing.

Website: alexis-degryse.com
Twitter: @twogrey
Mastodon: @twogrey@h4.io
LinkedIn: alexis-degryse
CodePen: twogrey
GitHub: twogrey
Bluesky: twogrey.bsky.social

More articles