I want a way to restrict a datalist-backed input to only its listed options
Submitted by Zacky Ma
Permalink https://webwewant.fyi/wants/dab681a3-2201-4d83-a6a0-64941967591f/
This idea is currently being discussed.
I want an attribute on <datalist> — or its associated <input> — that restricts valid values to only the options listed in the <datalist>, causing the input to be considered invalid if the user types or submits anything outside that set.
Today, <datalist> presents suggestions but never enforces them: users can freely type any value, and the browser treats anything as valid. This is very different from <select>, which limits choices to exactly what the author has defined. There is a real and common use case — fields like "Country", "State/Province", or "Job Title" — where I want the discoverability and search-friendly UX of a <datalist> combined with the strict validation of a <select>.
A <select> forces a choice but is not searchable. A <datalist> is searchable but does not enforce a choice. Neither element alone serves the pattern of "pick exactly one value from a large, well-known list". The most natural fix would be an exhaustive attribute (or similar) on <datalist> that opts the associated input into strict validation — so that a value not present in the list marks the field as invalid and blocks form submission.
This would make the combo of <input list="..."> and <datalist> a genuine alternative to a radio button group or a <select> for long option lists, without requiring JavaScript-based validation to enforce the constraint.
- Votes
- 0
What are votes for and how are they tallied?