Accessible "Chips" Pattern

Selected cities:

Basic Interaction

  1. Enter a U.S. city name via typing, or select via autosuggest (for keyboard use the up/down arrows and Enter).
  2. Press the Add City button.
  3. City appears in list below; press remove/X to remove selection.


  1. This pattern was created as an alternative design to the Angular Material Chips Autocomplete pattern.
  2. This pattern is based on the autosuggest demo (in the same repo).
  3. As an experiment, here's a fork of this project implementing the HTML5 datalist element for the dropdown. Unfortunately, datalist has fairly poor accessibility support. Both resources by Michael Fairchild (@mfairchild365).