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.

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.

Download Free 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

• Binding the ChipList to Data
• Handle the ChipList events
• Handle Chip Selection

See Also

• Live Demo: ChipList Overview
• ChipList API Reference