Chip Component

The Ignite UI for Web Components 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 Web Components Chip is a container that holds a label and optional icons in a single row.

igc-chip                              // host
└─ div[part="base"]                   // chip wrapper
   ├─ button[part="action"]           // selection control; aria-pressed when selectable
   │  ├─ span[part="prefix"]          // hidden when empty and not selected
   │  │  ├─ slot[name="select"]       // default select icon, shown when selectable and selected
   │  │  ├─ slot[name="start"]        // content before the prefix content
   │  │  └─ slot[name="prefix"]       // content before the label
   │  ├─ span[part="content"]
   │  │  └─ slot                      // label (default slot)
   │  └─ span[part="suffix"]          // hidden when empty
   │     ├─ slot[name="end"]          // content before the suffix content
   │     └─ slot[name="suffix"]       // content after the label
   └─ span[part="remove"]             // rendered when removable and not disabled
      └─ slot[name="remove"]          // default remove icon button

Getting Started

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

Import and register the Chip component and its theme.

import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChipComponent);

Prerequisites and Version Compatibility

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

• The outlined property is available in igniteui-webcomponents 7.3.0 and later.
• The action and remove parts are available in 7.3.1 and later. In earlier versions, the base part is the selection button and the remove icon renders inside it.
• The start and end slots are documented in 7.3.1 and later. Earlier versions render them but don’t document them.

Usage

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

Layout

The Web Components Chip supports content templating around its label. Place content in the prefix and suffix slots 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 in the default slot. The start slot renders before the prefix content, and the end slot renders before the suffix content. Use the select and remove slots to replace the default select and remove icons.

<igc-chip selectable removable>
  <igc-icon slot="select" name="check"></igc-icon>
  <igc-icon slot="prefix" name="person"></igc-icon>
  Ana Zane
  <igc-icon slot="suffix" name="mail"></igc-icon>
  <igc-icon slot="remove" name="close"></igc-icon>
</igc-chip>

Custom content in the remove slot replaces the default remove icon, including its focus and accessible label. Make the replacement focusable and give it an accessible name.

Types

The Web Components 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.

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

Outlined

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

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

Size

The Web Components 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 Web Components 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.

<igc-chip disabled>Archived</igc-chip>

State

When users interact with the Web Components 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 or Enter. Each toggle updates selected and emits a selection event with the new state. Set selected to define the initial state.

The select icon and the pressed state appear only when selectable is set.

<igc-chip selectable selected>Bold</igc-chip>

const chip = document.querySelector('igc-chip');

chip.addEventListener('igcSelect', (event) => {
  console.log(event.detail); // the new selected state
});

Remove Chip

A removable Web Components 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.

<igc-chip removable>Angular</igc-chip>

document.querySelectorAll('igc-chip[removable]').forEach((chip) => {
  chip.addEventListener('igcRemove', () => chip.remove());
});

Chips Area

To organize a collection of chips, place them in a container that lays them out with a gap, such as a wrapping flex container.

The Web Components Chip has no separate chips area component, so the container’s CSS sets the layout.

.chips-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Localization

Set locale to show the built-in strings in a registered language, or set resourceStrings to provide your own. The chip uses these strings for the accessible label of the default remove icon. See Localization for registering languages.

<igc-chip removable locale="de">Design</igc-chip>

const chip = document.querySelector('igc-chip');
chip.resourceStrings = { chip_remove: 'Remove tag' };

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 Web Components Chip exposes properties for selection, removal, state, and appearance.

Events

The Web Components Chip emits events when users select or remove it.

Styling

Style the Web Components Chip with its CSS variables for token-level changes, and with its CSS parts 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-theming/sass/themes" 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 part.

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

Styling with Tailwind

You can style the Web Components 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.

Accessibility

The Web Components 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 Web Components Chip exposes its state through native semantics and ARIA attributes, and takes its accessible name from its content.

• The selection control is a native button. When selectable is set, aria-pressed reflects the selected state.
• The default select icon is hidden from assistive technology, because aria-pressed already conveys the selected state.
• The default remove icon is a separate control with role="button", tabindex="0", and an aria-label that defaults to “remove chip”.
• A disabled chip disables its native button, so assistive technology reports the chip as unavailable.

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

Accessibility Compliance

Infragistics documents Ignite UI for Web Components 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.

• Keep custom remove slot content focusable and labeled, as described in Layout.

Known exceptions:

• In releases based on igniteui-webcomponents 7.4.1 and earlier, an aria-label set on the chip element doesn’t reach the selection button, so it doesn’t change the chip’s accessible name. Name the chip through its content instead.

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 did my ::part(base) styles change after an upgrade?

Starting with igniteui-webcomponents 7.3.1, the base part is the chip wrapper, the selection button is the action part, and the remove control is in the remove part. Move styles that targeted the button to ::part(action).

Why doesn’t my focus outline variable apply anymore?

The --ig-chip-focus-outline-color and --ig-chip-focus-selected-outline-color variables were replaced by --ig-chip-focus-shadow-color and --ig-chip-focus-selected-shadow-color in igniteui-webcomponents 7.3.0. Rename the variables in your styles.

API References

Dependencies

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

Register any custom icons that you place in the chip slots.

Additional Resources

Use these resources for support and related Ignite UI for Web Components documentation.

• Icon
• Ignite UI for Web Components Forums
• Ignite UI for Web Components 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