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
datalist is ideal for lightweight suggestions when users still need free text input. Treat suggestions as guidance, then validate submitted values normally because users can always type custom content.
datalist is best for lightweight suggestions where free typing remains important. Keep server-side validation in place, because users can always submit values outside suggestions.
For production forms, test keyboard order, disabled states, and validation messages with realistic labels. Native behavior should remain intact while visual polish improves.
For teams, list is easiest to maintain when it starts in one documented example before broader reuse. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!