I want a way to restrict a datalist-backed input to only its listed options

Submitted by Zacky Ma

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.

Tagged
HTML Forms
Votes
0
What are votes for and how are they tallied?