Code examples

Custom listbox with autocomplete

Custom listboxes are notoriously difficult to build in an accessible fashion for screenreaders.

Semantic input with datalist autocomplete

  • This simple native HTML example illustrates all the functionality of a listbox with inline autocomplete.
    • Support and functionality on mobile devices varies.
<label for="favorite-nato-text">
  What's your favorite NATO letter?:
<input id="favorite-nato-text" 
<datalist id="nato-letters"> 
  <option value="Alpha"> 
  <option value="Bravo"> 
  <option value="Charlie"> 
  <option value="Delta">
  <option value="Echo">
  <option value="Foxtrot">
  <option value="Golf">
  <option value="Hotel">
  <option value="India">
  <option value="Juliet">
  <option value="Kilo">
  <option value="Lima">
  <option value="Mike">
  <option value="November">
  <option value="Oscar">
  <option value="Papa">
  <option value="Quebec">
  <option value="Romeo">
  <option value="Sierra">
  <option value="Tango">
  <option value="Uniform">
  <option value="Victor">
  <option value="Whiskey">
  <option value="X-ray">
  <option value="Yankee">
  <option value="Zulu">