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 100+ 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

@using Telerik.FontIcons

<TelerikChip @bind-Selected="@Chip1Selected"
             Text="Audio"
             Icon="@FontIcon.FileAudio">
</TelerikChip>

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


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

    private bool Chip2Selected { get; set; }
}

Events

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

Appearance

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

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

Next Steps

See Also

In this article