Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min
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.

<label>
 Animal:
 <input name=animal list=animals>
</label>
<datalist id=animals>
  <option value="Dog">๐Ÿถ
  <option value="Cat">๐Ÿฑ
  <option value="Duck">๐Ÿฆ†
</datalist>

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 14 days ago.

Related Topics

Related Articles