Datalist Settings
Preset suggestions
My own list
Countries
Programming languages
Frameworks
Email domains
CSS colours
Time zones
Skills / tags
Suggestions — one per line
JavaScript TypeScript Python Rust Go Ruby Java C# Swift Kotlin
Optionally use
value | description
to add a hint shown beside the suggestion in Chrome and Edge.
Input id
Datalist id
name attribute
Input type
text
search
email
url
tel
number
date
range
color
Label text
Placeholder
Options
Include a <label>
required
Use the label attribute on options
Chrome and Edge show it as a secondary hint; other browsers ignore it.
Sort alphabetically
Remove duplicates
Set autocomplete="off"
Stops the browser's own saved-value list competing with your suggestions.
Add JS restricting input to the list
datalist is only a suggestion — free text is always allowed without this.
Output format
HTML
JSX / React
Vue template
JSON array
Generated Markup
Code
Live preview
Browser behaviour
datalist.html
Copy
Download
A working datalist — click the field and start typing.