Blazor ChipList Overview

The Blazor ChipList component shows pieces of information in a compact form. The individual chips can be selected, removed, or disabled. You can respond to various user interactions through the exposed events, customize the appearance of the chips, or define custom content for the chip with the ItemTemplate.

Telerik UI for Blazor Ninja image

The ChipList 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 ChipList

  1. Add the TelerikChipList tag
  2. Set the Data parameter to a collection of models that will be rendered as chips.
  3. Set the TextField parameter to point to the corresponding name in the model that holds the text that will be rendered in the individual chip. Read the Data Binding article for more information on other binding options.

Basic ChipList for Blazor

<TelerikChipList Data="@ChipListSource"
                 TextField="@(nameof(ChipModel.ChipText))"
                 IconField="@(nameof(ChipModel.ChipIcon))">
</TelerikChipList>

@code {
    private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
    {
        new ChipModel()
        {
            ChipText = "Audio",
            ChipIcon = SvgIcon.FileAudio
        },
        new ChipModel()
        {
            ChipText = "Video",
            ChipIcon = SvgIcon.FileVideo
        }
    };

    public class ChipModel
    {
        public string ChipText { get; set; }
        public ISvgIcon ChipIcon { get; set; }
    }
}

Data Binding

The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the Data property. Read more about the Blazor ChipList data binding.

Selection

The Blazor ChipList supports single and multiple selection of chips. Read more about the Blazor ChipList selection...

Templates

You can use the functionality of the built-in templates and customize the default rendering of the component. Read more about the Blazor ChipList templates...

Events

You can use the built-in events of the Blazor ChipList to react to chip selection and removal. Read more about the Blazor ChipList events...

Appearance

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

ChipList Parameters

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

Parameter Type and Default Value Description
AriaLabel string Maps to the aria-label attribute. Use this parameter if the text that labels the component is not visible.
AriaLabelledBy string Maps to the area-labelledby attribute. Use this parameter to reference another element to define its accessible name.
Class string An additional CSS class for the <div class="k-chip-list"> element. Use it to customize the component styles and override the theme.
Data IEnumerable<TItem> The collection of the items that will be rendered as chips.
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.

Next Steps

See Also

In this article