Chip Component

The Ignite UI for Blazor 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 Blazor 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 Blazor and configure a theme, as described in the Getting Started topic, before you add the Blazor Chip to an application.

Register the Ignite UI for Blazor services:

// in Program.cs file

builder.Services.AddIgniteUIBlazor();

Registering IgbChipModule, the client resource module of the IgbChip, is optional: the component loads its resources when it first renders. Listing it in builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)) can be used to preload resources or to support elements created only on the client (see Component Modules).

Add the theme stylesheet to your host page.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Prerequisites and Version Compatibility

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

Use the IgniteUI.Blazor package. IgniteUI.Blazor 26.1 ships an earlier version of the chip:

• IgbChip doesn’t expose the Outlined, Locale, or ResourceStrings properties.
• The base part is the selection button, and the remove icon renders inside it. The chip has no action or remove parts.
• The focus styles read --ig-chip-focus-outline-color and --ig-chip-focus-selected-outline-color.
• The keyboard and screen reader behavior differs, as described in Accessibility.

Usage

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

Layout

The Blazor 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.

<IgbChip Selectable="true" Removable="true">
    <IgbIcon slot="select" IconName="check" Collection="material" />
    <IgbIcon slot="prefix" IconName="person" Collection="material" />
    Ana Zane
    <IgbIcon slot="suffix" IconName="mail" Collection="material" />
    <IgbIcon slot="remove" IconName="close" Collection="material" />
</IgbChip>

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 Blazor Chip provides two types: Default and Primary.

Leave Variant unset for the default type, or set it to StyleVariant.Primary for the primary type. The variant also accepts StyleVariant.Info, StyleVariant.Success, StyleVariant.Warning, and StyleVariant.Danger for status colors.

<IgbChip>Default</IgbChip>
<IgbChip Variant="StyleVariant.Primary">Primary</IgbChip>

Size

The Blazor 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 Blazor 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.

<IgbChip Disabled="true">Archived</IgbChip>

State

When users interact with the Blazor 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.

<IgbChip Selectable="true" Selected="@isBold" SelectedChanged="OnSelectedChanged">Bold</IgbChip>

@code {
    private bool isBold = true;

    private void OnSelectedChanged(bool selected) => isBold = selected;
}

Remove Chip

A removable Blazor 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.

Assign a JavaScript handler through RemoveScript, and register it with igRegisterScript in a script file that your host page loads.

<IgbChip Removable="true" RemoveScript="handleChipRemove">Angular</IgbChip>

function handleChipRemove(event) {
    event.target.remove();
}

igRegisterScript("handleChipRemove", handleChipRemove, false);

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 Blazor 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;
}

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

Events

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

Styling

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

In IgniteUI.Blazor 26.1, the chip has no outlined style, so --ig-chip-outlined-background and --ig-chip-outlined-text-color have no effect. The chip reads --ig-chip-focus-outline-color and --ig-chip-focus-selected-outline-color instead of --ig-chip-focus-shadow-color.

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 Blazor 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 Blazor 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.

In IgniteUI.Blazor 26.1, on a chip that isn’t removable, Space doesn’t toggle the selection, and Enter toggles it and also raises the remove event.

Screen Readers / ARIA

The Blazor Chip exposes its state through native semantics and ARIA attributes.

• The chip is a native button. When Selectable is set, aria-pressed reflects the Selected state.
• The default select icon has the aria-label “select chip”.
• The default remove icon, with role="button", tabindex="0", and the aria-label “remove chip”, renders inside the chip’s button, so it’s a nested control.
• Because the icons render inside the button, the accessible name of the chip includes their labels, for example “Chip remove chip”.
• A disabled chip disables its native button, so assistive technology reports the chip as unavailable.

Accessibility Compliance

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

API References

Dependencies

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

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

The chip also uses the shared theme stylesheet for its default appearance.

Additional Resources

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

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