<h1>The datalist element</h1>

<p>Browser support (and screen reader support) is pretty good now! [June 2023]</p>

<p>This is a much better solution over the dreaded custom autosuggest/ARIA combobox.</p>

<form>
  <label for="browser">Choose your browser:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p><a href="https://www.webaxe.org/datalist-over-aria-combobox/">Web Axe article</a></p>
<p><a href="https://caniuse.com/datalist">Datalist on CanIUse.com</a></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">Datalist on MDN</a></p>

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.