New to Kendo UI for jQuery? Start a free 30-day trial
Customization
Updated on Dec 10, 2025
The ChipList component provides options for customizing its look and feel.
When customizing the rendering of the chips inside the ChipList, you can:
Custom Attributes
To define a custom attributes for the Chip inside the ChipList, use the items.attributes property.
<div id="chiplist"></div>
<script>
$('#chiplist').kendoChipList({
items: [
{ text: "Home", icon: "home", attributes: { "data-val" : "custom data attribute" } },
{ text: "Info", icon: "info-circle" },
{ text: "Contact", icon: "envelope" }
]
});
</script>Displaying Avatars
The ChipList component treats the avatar as an icon. To display an avatar, pass a CSS class to the items.avatarClass property.
<style>
.dan {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg");
}
.thomas {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg");
}
.maria {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
}
</style>
<div id="chiplist"></div>
<script>
$('#chiplist').kendoChipList({
items: [
{ avatarClass: 'maria', label: 'Maria' },
{ avatarClass: 'thomas', label: 'Thomas' },
{ avatarClass: 'dan', label: 'Dan' },
]
});
</script>