Datalist is for suggesting values without enforcing values

Ever needed a form field for short, free-form text, like a name? That's what HTML input fields are for. There are many input types and modes, and choosing the right one is crucial.

But this isn't about input types; it's about something else, applicable to any input type.

What if the text is arbitrary (e.g., "Favorite color?") allowing free text input, but you also want to offer suggestions? A few popular answers might exist. Wouldn't it be great to let users select from a list, but not force them to? Not a dropdown, but a hybrid of input and dropdown? Hold on! Don't build a custom React component yet.

That's where the <datalist></datalist> element shines. I recently used it successfully, so I'm sharing it.

Here's the gist:

My use case required:

1. A username input field.
2. A "flag" input (an arbitrary string for permissions).

I wouldn't use <datalist></datalist> for every username in a database. While there might not be a strict limit, the options reside in your HTML, so it's best suited for perhaps 100 options or fewer.

But for the "flag" field, with only 3-4 unique flags, <datalist></datalist> was perfect. Users can type freely, but the UI suggests common choices—incredibly helpful. This approach could be useful for gender input, providing options without mandatory selection.

Even less known than <datalist></datalist>'s existence? It works with various input types beyond text, including date, range, and even color.

The above is the detailed content of Datalist is for suggesting values without enforcing values. For more information, please follow other related articles on the PHP Chinese website!