Components / Buttons / ChipList

Selection Mode

The supported selection modes are single, multiple or none(default).

Single Selection

The following example demonstrates single and none selection mode.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Single selection</p>

                <kendo-chip-list [selection]="'single'">
                    <kendo-chip
                        *ngFor="let chip of chips"
                        [label]="chip.label"
                        [selected]="chip.selected"
                    >
                    </kendo-chip>
                </kendo-chip-list>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>No selection</p>

                <kendo-chip-list>
                    <kendo-chip
                        *ngFor="let chip of chips"
                        [label]="chip.label"
                    >
                    </kendo-chip>
                </kendo-chip-list>
            </div>
        </div>
    `
})
class AppComponent {
    public chips = [
        {
            label: 'Apple',
            selected: true
        },
        {
            label: 'Strawberry',
            selected: false
        },
        {
            label: 'Banana',
            selected: false
        },
        {
            label: 'Kiwi',
            selected: false
        }
    ];
}

Multiple Selection

The following example demonstrates multiple selection mode.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Multiple selection</p>

                <kendo-chip-list [selection]="'multiple'">
                    <kendo-chip
                        *ngFor="let chip of chips"
                        [label]="chip.label"
                        [selected]="chip.selected"
                    >
                    </kendo-chip>
                </kendo-chip-list>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Multiple selection with icon/avatar</p>

                <kendo-chip-list [selection]="'multiple'">
                    <kendo-chip
                        *ngFor="let chip of chips"
                        [label]="chip.label"
                        [icon]="chip.icon"
                        [selected]="chip.selected"
                    >
                    </kendo-chip>
                </kendo-chip-list>
            </div>
        </div>
    `
})
class AppComponent {
    public chips = [
        {
            label: 'Apple',
            icon: 'marker-pin-target',
            selected: true
        },
        {
            label: 'Strawberry',
            icon: 'marker-pin-target',
            selected: true
        },
        {
            label: 'Banana',
            icon: 'marker-pin-target',
            selected: false
        },
        {
            label: 'Kiwi',
            icon: 'marker-pin-target',
            selected: false
        }
    ];
}

In this article