Chip Component

The Ignite UI for Angular Chip is a compact element that represents a tag, filter, or person and that users can select or remove.

A chip can be selectable, removable, or both, and can show icons or other content before and after its label.

Live Demo

Anatomy

The Angular Chip is a container that holds a label and optional icons in a single row.

igx-chip[role="option"]               // host; aria-selected reflects `selected`
└─ div.igx-chip__item                 // chip wrapper; drag and drop target
   ├─ div.igx-chip__start
   │  ├─ div.igx-chip__select         // select icon, shown while selected
   │  └─ [igxPrefix]                  // content before the label
   ├─ div.igx-chip__content           // label (projected content)
   └─ div.igx-chip__end
      ├─ [igxSuffix]                  // content after the label
      └─ div.igx-chip__remove         // remove control, rendered when removable

Getting Started

Install Ignite UI for Angular and configure a theme, as described in the Getting Started topic, before you add the Angular Chip to an application.

Import IGX_CHIPS_DIRECTIVES into your component. It includes the chip, the chips area, and the igxPrefix and igxSuffix directives.

import { Component } from '@angular/core';
import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular/chips';

@Component({
  selector: 'app-chip-sample',
  imports: [IGX_CHIPS_DIRECTIVES],
  template: `<igx-chip>Design</igx-chip>`,
})
export class ChipSampleComponent {}

Prerequisites and Version Compatibility

Some Angular Chip features depend on the package version that your application uses.

Use the igniteui-angular package. The outlined input is available in 22.2.0 and later.

Usage

Add a label to the Angular Chip, then add icons, a type, a size, and selection or removal as your layout needs.

Layout

The Angular Chip supports content templating around its label. Mark content with the igxPrefix and igxSuffix directives to show it before and after the label, such as text or an Icon. Icons in the chip follow its size, so they also come in three sizes: large, medium, and small.

Place the label inside the chip. Set the selectIcon and removeIcon inputs to templates that replace the default select and remove icons.

<igx-chip selectable removable [selectIcon]="selectIcon" [removeIcon]="removeIcon">
  <igx-icon igxPrefix>person</igx-icon>
  Ana Zane
  <igx-icon igxSuffix>mail</igx-icon>
</igx-chip>

<ng-template #selectIcon>
  <igx-icon>check_circle</igx-icon>
</ng-template>

<ng-template #removeIcon>
  <igx-icon>delete</igx-icon>
</ng-template>

Custom selectIcon and removeIcon templates replace the default icons, including their accessible labels, so give your icons an accessible label.

Types

The Angular Chip provides two types: Default and Primary.

Leave variant unset for the default type, or set it to primary for the primary type. The variant also accepts info, success, warning, and danger for status colors.

<igx-chip>Default</igx-chip>
<igx-chip variant="primary">Primary</igx-chip>

Outlined

Set outlined to render the chip with a border and the outlined background. You can combine it with any variant.

<igx-chip outlined variant="info">Draft</igx-chip>

Size

The Angular Chip comes in three sizes:

• Large: suitable for interactive scenarios, such as action triggers.
• Medium: suitable for short areas, such as the recipient field of an email composer.
• Small: suitable for data-dense scenarios, such as the values in a grid cell.

Set --ig-size to var(--ig-size-small), var(--ig-size-medium), or var(--ig-size-large) to change the chip size. Set it on a chip, or on a container to size all chips inside it.

.filter-chips {
  --ig-size: var(--ig-size-small);
}

Interaction State

The Angular Chip can be enabled or disabled.

Set disabled to prevent interaction. A disabled chip can’t receive focus or be selected, and it doesn’t render the remove icon, even when removable is set.

<igx-chip disabled>Archived</igx-chip>

State

When users interact with the Angular Chip, it changes from its default idle state to hover, focused, and selected.

The selected state needs selection to be enabled. Set selectable to let users toggle the chip by clicking it or pressing Space. Each toggle updates selected and emits a selection event with the new state. Set selected to define the initial state.

The cancelable selectedChanging event reports the new state in selected, and selectedChanged follows after the state changes. Bind [(selected)] to keep the state in your component. The select icon appears whenever selected is true.

<igx-chip selectable [(selected)]="isBold" (selectedChanging)="onSelectedChanging($event)">Bold</igx-chip>

import { IChipSelectEventArgs } from 'igniteui-angular/chips';

public isBold = true;

public onSelectedChanging(event: IChipSelectEventArgs) {
  console.log(event.selected); // the new selected state
}

Remove Chip

A removable Angular Chip shows a remove icon at its end that users activate to request the chip’s removal.

Set removable to show the icon. Activating the icon emits a remove event, but the chip stays on the page. Remove the chip, or the item it represents, in the event handler.

@for (chip of chips; track chip.id) {
  <igx-chip [id]="chip.id" removable (remove)="onRemove($event)">{{ chip.text }}</igx-chip>
}

import { IBaseChipEventArgs } from 'igniteui-angular/chips';

public chips = [
  { id: 'angular', text: 'Angular' },
  { id: 'react', text: 'React' },
  { id: 'blazor', text: 'Blazor' },
];

public onRemove(event: IBaseChipEventArgs) {
  this.chips = this.chips.filter((chip) => chip.id !== event.owner.id);
}

Chips Area

Use the ChipsArea component to organize a collection of chips.

Inside the chips area, the arrow keys move focus between chips. When users drag a draggable chip over another chip, or press Shift and an arrow key, the chips area emits reorder with the new order. It also emits selectionChange with the selected chips. The chips area doesn’t reorder the chips itself, so apply the new order to your data in the reorder handler.

<igx-chips-area (reorder)="onReorder($event)">
  @for (chip of chips; track chip.id) {
    <igx-chip [id]="chip.id" [draggable]="true">{{ chip.text }}</igx-chip>
  }
</igx-chips-area>

import { IChipsAreaReorderEventArgs } from 'igniteui-angular/chips';

public onReorder(event: IChipsAreaReorderEventArgs) {
  this.chips = event.chipsArray.map((chip) => this.chips.find((item) => item.id === chip.id)!);
}

Localization

The chip follows the language set through the global localization API, described in Localization. Set resourceStrings to override the accessible labels of the default select and remove icons for a single chip.

<igx-chip removable [resourceStrings]="{ igx_chip_remove: 'Remove tag' }">Design</igx-chip>

Do/Don’t

When using a Chip, the obround will automatically size itself to fit the content and you only need to adjust the size of the instance accordingly. If the Chip is used as an action trigger for related content, avoid using it in scenarios where there is only one available action, or for configurations presenting only one selectable option.

DoUse chips for grouped actions or a small set of related options.

Don’tAvoid using a chip for single actions or single choices.

Properties

The Angular Chip exposes properties for selection, removal, state, and appearance.

The ChipsArea exposes properties for its size.

Events

The Angular Chip emits events when users select or remove it.

The ChipsArea emits events for the chips inside it.

Styling

Style the Angular Chip with its CSS variables for token-level changes, and with its CSS classes when you need to target a specific element.

Sass Theming

Use the chip-theme function when your application customizes Ignite UI themes through Sass. Set $background, or $outlined-background for outlined chips, and the theme derives the text, hover, focus, and selected colors from it. Override any other parameter when you need a specific value.

@use "igniteui-angular/theming" as *;

$custom-chip-theme: chip-theme(
  $background: #011627,
  $remove-icon-color: #fecc47
);

:root {
  @include tokens($custom-chip-theme);
}

CSS Variables

Set the chip CSS variables directly when you need local styling without a Sass build step. Set them on a chip, or on a container to style all chips inside it.

.filter-chips {
  --ig-chip-background: var(--ig-primary-500);
  --ig-chip-text-color: var(--ig-primary-500-contrast);
  --ig-chip-remove-icon-color: var(--ig-primary-500-contrast);
}

To style a single element of the chip, target its CSS class.

igx-chip .igx-chip__end {
  color: var(--ig-gray-400);
}

Styling with Tailwind

You can style the Angular Chip with Tailwind utility classes, and set its CSS variables through arbitrary properties such as [--ig-chip-background:var(--ig-primary-600)]. Make sure to set up Tailwind first, as described in Tailwind Classes.

Accessibility

The Angular Chip supports keyboard operation and exposes its state to assistive technology.

Keyboard Interaction

Keyboard users reach each chip with Tab, followed by its remove control when the chip is removable. Disabled chips are skipped.

Screen Readers / ARIA

The Angular Chip exposes its state through native semantics and ARIA attributes, and takes its accessible name from its content.

• The chip host has role="option", and aria-selected reflects the selected state.
• The igx-chips-area element has role="listbox" and the aria-label “chip area”.
• The default select and remove icons have accessible labels.
• A disabled chip is removed from the tab order, but no ARIA attribute exposes its disabled state.

You can change the labels of the default icons, as shown in Localization.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Give every chip a text label that identifies the item it represents.

• Move focus to a logical place, such as the next chip, after you remove a chip in the remove event handler.

• Keep sufficient contrast between the chip background and its text and icons when you override the theme colors.

• Keep a visible focus indicator when you restyle the chip.

• Keep chips and their remove controls large enough to tap when you use the small size or a custom --ig-chip-size.

• Place chips that users select inside an igx-chips-area, so their option role has a listbox parent.

• Label custom select and remove icon templates, as described in Layout.

Known exceptions:

• The remove control is focusable and contains a labeled icon, but it doesn’t expose a button role.
• The disabled state isn’t exposed through ARIA, so screen readers don’t announce a disabled chip as disabled. Describe the state in nearby text when users need to know it.

Troubleshooting

Use this section when a chip doesn’t behave or look as expected after a change or an upgrade.

Why does the chip stay on the page after I click the remove icon?

The remove event only notifies your application. Remove the chip in the event handler, as shown in Remove Chip.

Why doesn’t my focus outline variable apply anymore?

In igniteui-angular 22.2.0, the $focus-outline-color and $focus-selected-outline-color parameters of chip-theme were replaced by $focus-shadow-color and $focus-selected-shadow-color. Rename the parameters, and the matching --ig-chip-* variables, in your styles.

API References

Dependencies

The Angular Chip renders its default select and remove icons with the Icon component, which is included with the chip.

Icons that use Material Icons names, such as <igx-icon>person</igx-icon>, require the Material Icons font. Add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to your index.html. The Sass styling workflow uses the chip-theme and icon-theme functions.

Additional Resources

Use these resources for support and related Ignite UI for Angular documentation.

• Icon
• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

Use these related components when a chip isn’t the best match for the interaction.

• Button - A control that runs a command, such as submitting a form or opening a dialog.
• Checkbox - A form control for an on/off choice or a set of independent choices.
• Badge - A small, non-interactive indicator for a status, count, or notification.

FAQ