Default Template

Custom Template

Chips with Autocomplete

Chips with Autocomplete (requires match)

Template

<h2>Default Template</h2>
<PaperChips @content={{this.fruitNames}} @readOnly={{this.readOnly}} @removeItem={{action "removeItem"}} @addItem={{action "addItem"}} @placeholder="Add a tag" />

<h2>Custom Template</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeCustomItem"}} @addItem={{action "addCustomItem"}} @placeholder="Add a tag" @content={{this.customFruitNames}} as |item|>
  <strong>{{item}}</strong>
  <em>(fruit)</em>
</PaperChips>

<h2>Chips with Autocomplete</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeVegetable"}} @addItem={{action "addVegetable"}} @placeholder="Add a vegetable" @content={{this.vegetables}} @options={{this.remainingVegetables}} @searchField="name" @noMatchesMessage="Not found. Click to add." as |item|>
  <strong>{{item.name}}</strong>
  {{#if item.family}}
    <em>{{item.family}}</em>
  {{/if}}
</PaperChips>

<h2>Chips with Autocomplete (requires match)</h2>
<PaperChips @readOnly={{this.readOnly}} @removeItem={{action "removeVegeName"}} @addItem={{action "addVegeName"}} @placeholder="Add a vegetable" @content={{this.vegeNames}} @options={{this.remainingVegeNames}} @requireMatch={{true}} />

Contact Chips