Build better forms with one HTML tag
Autocomplete. Suggestions. Flexibility.
The native <datalist> element can help improve form UX.
Here’s how it works:
You pair a standard <input> with a <datalist> using the list attribute.
Each <option> in the datalist appears as a suggestion as the user types, but they’re free to enter a completely custom value too.
And it’s not just for text. It works with color, time and range.
Why it’s worth using:
- Keeps forms lightweight and fast
- No extra libraries or JS required
- Fully accessible and keyboard-friendly
- Still allows user freedom, not just a strict dropdown
It’s a small detail that can make a big difference in form usability. And the best part? It’s supported in all modern browsers with over 95% support.
Curious how often you reach for it!
Here’s the codepen: https://codepen.io/theosoti/pen/azOKxoo
To learn more tips about CSS, make sure to join my newsletter below ❤️