ipsos-components/src/demo-app/a11y/chips/chips-a11y.html

Material Design components for Angular

<section>
  <h2>Basic chips</h2>
  <mat-chip-list>
    <mat-chip>Carnation</mat-chip>
    <mat-chip>Irises</mat-chip>
    <mat-chip>Buttercup</mat-chip>
  </mat-chip-list>

</section>

<section>
  <h2>Unstyled chips</h2>

  <mat-chip-list>
    <mat-basic-chip>Husky </mat-basic-chip>
    <mat-basic-chip>Golden Retriever </mat-basic-chip>
    <mat-basic-chip>Border Collie </mat-basic-chip>
  </mat-chip-list>
</section>

<section>
  <h2>Removable chips in a form field</h2>

  <mat-form-field>
    <mat-chip-list matPrefix #chipList>
      <mat-chip *ngFor="let person of people" [color]="color" (remove)="remove(person)">
        {{person.name}}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
    <input matInput placeholder="New Contributor..."
           aria-label="New contributor"
           [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-form-field>
</section>

<section>
  <h2>Colored chips</h2>
  <p>This example is good for contrast-radio checking.</p>
  <mat-chip-list>
    <mat-chip color="primary" selected="true">Primary</mat-chip>
    <mat-chip color="accent" selected="true">Accent</mat-chip>
    <mat-chip color="warn" selected="true">Warn</mat-chip>
  </mat-chip-list>
</section>


<section>
  <h2>Stacked chips</h2>
  <mat-chip-list class="mat-chip-list-stacked">
    <mat-chip [selectable]="false">Lemon</mat-chip>
    <mat-chip [selectable]="false">Lime</mat-chip>
    <mat-chip [selectable]="false">Grapefruit</mat-chip>
  </mat-chip-list>
</section>