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.

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.

Download Free 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"
             Text="Audio"
             Icon="@SvgIcon.FileAudio">
</TelerikChip>

<TelerikChip @bind-Selected="@Chip2Selected">
    <TelerikSvgIcon Icon="@SvgIcon.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...

To learn more about the appearance, anatomy, and accessibility of the Chip, visit the Progress Design System Kit 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 (true)	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

• Customize the Chip appearance
• Handle Chip events

See Also

• Live Demo: Chip Overview
• Chip API Reference