New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

The configurations of the different chips inside the chiplist.

items

Array

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { icon: 'plus', label: 'Add' },
            { icon: 'pencil', label: 'Edit' },
            { icon: 'trash', label: 'Remove' },
        ]
    });
</script>

items.attributes

Object

Defines custom attributes of the Chip's element.

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

items.avatarClass

String

If set, value will be appended to the icon's element class attribute. It also appends "k-chip avatar" and "k-avatar" classes to the icon's element.

Default: ''

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

items.enabled

Boolean

Toggles the enabled state of the Chip item.

Default: true

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { label: "Enabled" },
            { label: "Disabled", enabled: false },
        ]
    });
</script>

items.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the chip by a span.k-icon or span.k-svg-icon element.

See web font icons help article for more details on Kendo UI icons.

Default: ''

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { icon: 'plus', label: 'Add' },
            { icon: 'pencil', label: 'Edit' },
            { icon: 'trash', label: 'Remove' },
        ]
    });
</script>

items.iconClass

String

If set, value will be appended to the icon's element class attribute.

Default: ''

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { iconClass: 'k-icon k-i-plus', label: 'Add' },
            { iconClass: 'k-icon k-i-pencil', label: 'Edit' },
            { iconClass: 'k-icon k-i-trash', label: 'Remove' },
        ]
    });
</script>

items.label

String

The label text of the chip. Default is empty string.

Default: ''

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { icon: 'plus', label: 'Add' },
            { icon: 'pencil', label: 'Edit' },
            { icon: 'trash', label: 'Remove' },
        ]
    });
</script>

items.selected

Boolean

Toggles the selected state of the Chip.

Default: false

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        selectable: "single",
        items: [
            { label: "Default selection" },
            { label: "Pre-selected", selected: true },
        ]
    });
</script>

items.themeColor

String

Specifies the theme color of the Chip item. Valid options are:

base: apply coloring based on surface theme color.
info: apply coloring based on info theme color.
success: apply coloring based on success theme color.
warning:apply coloring based on warning theme color.
error: apply coloring based on error theme color.

Default: 'base'

<div id="chiplist"></div>
<script>
    $('#chiplist').kendoChipList({
        items: [
            { label:"Base", themeColor: 'base' },
            { label:"Info", themeColor: 'info' },
            { label:"Success", themeColor: 'success' },
            { label:"Warning", themeColor: 'warning' },
            { label:"Error", themeColor: 'error' },
        ]
    });
</script>