Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Today I was reading an issue of Šime Vidas' great Web Platform news. He describes something that was news to me – datalist elements not only provide values that can be chosen but also have a mechanism to show labels, too.

 <input name=animal list=animals>
<datalist id=animals>
  <option value="Dog">🐶
  <option value="Cat">🐱
  <option value="Duck">🦆

The markup above results in the following:

Input field with auto-completion including values and labels

That's very cool in my opinion. :)

But heads-up: before you jump onto using this - make sure to read Šime's article about it. Currently, there is a Firefox bug that troubles user experience tremendously.

If you want to play around with it and see it in action you can have a look at this CodePen.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 12 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.