<datalist> Autocomplete Tester - Online ComboBox Demo

The <datalist> element provides an autocomplete/combobox functionality for <input> elements. It contains a set of <option> elements that represent suggested values. Users can either pick from the suggestions or type their own custom value — unlike <select> which restricts input to predefined options only.

Set the list attribute on the <input> to match the id of the <datalist>. Example: <input list="my-list"> and <datalist id="my-list">...</datalist>. Multiple inputs can share the same datalist by referencing the same id.

No — the dropdown rendering is controlled entirely by the browser's native UI and cannot be styled with CSS. This is a common limitation. If you need custom-styled autocomplete, consider using a JavaScript library like Awesomplete, Select2, or building a custom solution with a <div>-based dropdown. Chrome, Firefox, Safari, and Edge all render datalist dropdowns differently.

Yes, but the experience varies. iOS Safari displays options in a native picker-style overlay. Android Chrome shows a dropdown similar to desktop. Some mobile browsers may not show the dropdown until the user begins typing. Always test on real devices. For better mobile UX, consider pairing datalist with inputmode and autocomplete attributes.

When both value and label are specified on an <option> inside a datalist: the label is displayed in the dropdown, while the value is what gets inserted into the input when selected. This is great for scenarios like country codes: <option value="US" label="United States"> — users see "United States" but "US" fills the field.

Not natively — datalist always allows free-form input. To restrict users to predefined options, use a <select> element instead, or implement JavaScript validation on the input that checks against the datalist options. You can listen for the input event and validate with querySelectorAll against the datalist's options.

Listen for the input event on the <input> element. However, there's no built-in way to distinguish between a dropdown selection and manual typing. A workaround: compare the input's value against datalist option values using JavaScript. The change event fires when the input loses focus, which can also be useful for final value validation.

Yes! You can use <optgroup label="Group Name"> inside a <datalist> to categorize options. This is supported in Chrome, Firefox, Safari, and Edge. Group labels appear as non-selectable headers in the dropdown, helping organize long lists. Use the format # Group Name in our editor above to create optgroups.

Generally yes. Setting autocomplete="off" prevents the browser's own autofill/suggestion overlay from conflicting with the datalist dropdown. Without it, some browsers may show both their native autocomplete popup and the datalist suggestions simultaneously, creating a confusing UX. Test in your target browsers.

<datalist> is supported in all modern browsers: Chrome 20+, Firefox 4+, Safari 12.1+, Edge 12+, and Opera 9.5+. Internet Explorer 10+ has partial support (dropdown may behave differently). Global browser support exceeds 97%. For legacy browsers, the input degrades gracefully — users can still type freely, they just won't see suggestions.