Back to all features
Open for signals Forms

<datalist>

The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.

Community use cases (3)

Community signal summary

Developers rely on <datalist> to build dynamic comboboxes for large datasets and user-defined entries, such as filtering categories or populating job portal fields [1][2][3]. Key architectural requirements include auto-completing typeahead filtering [2], custom option creation with automated value bindings [1], and native <select>-like styling capabilities [1][3]. However, developers report critical pain points with native <datalist>, including an inability to style dropdown elements to match site design [1][3], unhandled layout constraints like menu clipping [3], and missing platform support on mobile browsers like Firefox for Android [2].

To bridge these gaps, teams currently rely on custom JavaScript/AJAX combobox layers or fallback <select> elements paired with hidden <input> controls [1][2][3]. These workarounds incur high maintenance penalties and degrade user experience through missing keyboard focus management, inadequate speech output, form data serialization mismatches, and horizontal clipping bugs [3]. Developers express strong sentiment for an extended, WCAG-compliant native <datalist> standard that permits custom visual styling and robust handling of user-created values without brittle JavaScript wrappers [1][2][3].

What I want to do with this feature

This seems like a useful feature when we have a set of recommendations but also we can't list all possible options as they are either ever-updating or unknown. For example: Listing colleges, companies, majors, minors, etc in a job application portal.

For this use case however, it would be better:

  • If the dropdown appeared more like <select>.
  • The new option that the user creates actually sends some data with value automatically filled for <option>.

What I'm having to do in the meantime

I have been using <select> with a mandatory option with value "Other" which may or may not trigger a hidden input to become visible depending on how important the field is.

What I want to do with this feature

I want to have a Select-like widget with a very large nunber of elements, where typing the first few letters of the element you want narrows down the list of options, so that you can choose the right one.

What I'm having to do in the meantime

Various kinds of JS and AJAX solutions, or straight up not supporting Firefox for Android which is the only major browser missing this.

What I want to do with this feature

Have a standard, WCGA proof, HTML based combobox with the option to enter new values, for things like labels, categories or other user defined data.
The list must have options to style the look to match rest of the site.

What I'm having to do in the meantime

Create or use custom JS based comboboxes with these problems:

  • HTML cannot express the GUI
  • can be incompatible with submitted form data, what is passed?
  • not WCAG proof, like lacking keyboard navigation, proper focus management and speech output
  • layout problems, like list is cut off by page length or long values not fitting the available space causing horizontal scrolling or worse, not being able to see the complete value