Skip to main content
Chips are compact elements that represent an input, attribute, or action. They can be used for filtering, selecting options, or displaying information.

​
Import

import { MatChip, MatChipSet } from '@angular/material/chips';
import { MatChipsModule } from '@angular/material/chips';

​
Basic Usage

<mat-chip-set>
  <mat-chip>Chip 1</mat-chip>
  <mat-chip>Chip 2</mat-chip>
  <mat-chip>Chip 3</mat-chip>
</mat-chip-set>

​
API Reference

​
MatChip

Selector: mat-chip, [mat-chip], mat-basic-chip, [mat-basic-chip] Exported as: matChip

​
Properties

NameTypeDescription
@Input() idstringUnique ID for the chip
@Input() valueanyValue of the chip
@Input() colorstringTheme color
@Input() removablebooleanWhether chip displays remove styling. Default: true
@Input() highlightedbooleanColors chip for emphasis
@Input() disableRipplebooleanWhether ripples are disabled
@Input() disabledbooleanWhether the chip is disabled
@Input() rolestringRole for the root element
@Input() aria-labelstringARIA label for content
@Input() aria-descriptionstringARIA description
@Output() removedEventEmitter<MatChipEvent>Emitted when chip is to be removed
@Output() destroyedEventEmitter<MatChipEvent>Emitted when chip is destroyed

​
Methods

NameDescription
focus(): voidFocuses the chip
remove(): voidAllows programmatic removal of the chip

​
Content Slots

SelectorDescription
matChipAvatarLeading icon for the chip
matChipTrailingIconTrailing icon
matChipRemoveRemove button

​
Examples

​
With Icons

<mat-chip-set>
  <mat-chip>
    <mat-icon matChipAvatar>face</mat-icon>
    John Doe
  </mat-chip>
  <mat-chip>
    <mat-icon matChipAvatar>face</mat-icon>
    Jane Smith
    <button matChipRemove>
      <mat-icon>cancel</mat-icon>
    </button>
  </mat-chip>
</mat-chip-set>

​
Removable Chips

export class ChipComponent {
  fruits = ['Apple', 'Banana', 'Orange'];

  remove(fruit: string) {
    const index = this.fruits.indexOf(fruit);
    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

<mat-chip-set>
  @for (fruit of fruits; track fruit) {
    <mat-chip (removed)="remove(fruit)">
      {{fruit}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
  }
</mat-chip-set>

​
Chip List with Input

<mat-form-field>
  <mat-chip-grid #chipGrid>
    @for (tag of tags; track tag) {
      <mat-chip-row (removed)="remove(tag)">
        {{tag}}
        <button matChipRemove>
          <mat-icon>cancel</mat-icon>
        </button>
      </mat-chip-row>
    }
  </mat-chip-grid>
  <input [matChipInputFor]="chipGrid"
         (matChipInputTokenEnd)="add($event)"/>
</mat-form-field>

​
Disabled Chips

<mat-chip-set>
  <mat-chip [disabled]="true">Disabled Chip</mat-chip>
</mat-chip-set>

​
Highlighted Chips

<mat-chip-set>
  <mat-chip [highlighted]="true">Highlighted</mat-chip>
</mat-chip-set>

​
Accessibility

  • Chips have appropriate ARIA roles based on usage
  • Use aria-label or aria-description for screen readers
  • Remove button is keyboard accessible
  • Backspace/Delete keys trigger chip removal

​
Types

interface MatChipEvent {
  chip: MatChip;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us