Accessible "Chips" Pattern

Based on the Web Overhauls Accessible chips demo. Modified to remove jQuery and use the HTML datalist element instead of a custom autosuggest.

Selected cities:

Basic Interaction

  1. Enter a U.S. city name via typing/autosuggest.
  2. Press the Add City button.
  3. City appears in list below; press remove/X to remove selection.