Blazor Chip Overview

The Blazor Chip component shows a piece of information in a compact form. The chip can be selected, removed or disabled. You can respond to various user interactions through the exposed events, and customize the appearance of the Telerik Chip for Blazor.

Telerik UI for Blazor Ninja image

The Chip component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Chip

To use a Telerik Chip for Blazor:

  1. Add the TelerikChip tag.
  2. Set the Selected parameter to a boolean. It supports one-way and two-way binding.
  3. Set the Text and Icon parameters, or define arbitrary ChildContent inside the TelerikChip tag.

Basic Chip for Blazor

<TelerikChip @bind-Selected="@Chip1Selected"

<TelerikChip @bind-Selected="@Chip2Selected">
    <TelerikSvgIcon Icon="@SvgIcon.Gear" />
    Chip ChildContent

@code {
    private bool Chip1Selected { get; set; } = true;

    private bool Chip2Selected { get; set; }


The Chip component fires events for clicks, selection and removal. Read more about them here.


You can customize the appearance of the Blazor Chip via a variety of built-in customization options. Read more about the Chip appearance settings...

To learn more about the appearance, anatomy, and accessibility of the Chip, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Chip Parameters

The table below lists the Chip parameters. Also check the Chip API Reference for all parameters, methods and events.

Parameter Type and Default Value Description
AriaLabel string Maps to the aria-label attribute of the <div class="k-chip"> element. Use this parameter if the text that labels the component is not visible.
Class string An additional CSS class for the <div class="k-chip"> element. Use it to customize the component styles and override the theme.
Disabled bool Specifies if the Chip is disabled.
Icon object Use this parameter to render an icon in the chip.
Id string Renders as the id attribute on the <select /> element, so you can attach a <label for=""> to it.
Removable bool Specifies if the chip can be removed by the user. If set to true a remove icon will be rendered on each available chip.
RemoveIcon object Defines the icon that will be rendered if the Removable parameter is set to true.
Selectable bool
Specifies if the Chip can be selected. Overrides the Selected parameter value.
Selected bool Controls the selected state of the Chip.
TabIndex int Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key.
Text string The string that is rendered in the Chip. You can set the Text parameter even when using a RenderFragment as a ChildContent of the Chip. Otherwise ChipRemoveEventArgs.Text will be null in the OnRemove handler#onremove.

Next Steps

See Also

In this article