Checkboxes
The Kendo UI for Angular MultiSelect supports checkboxes for selecting multiple items from the list. The checkboxes are displayed next to each item in the list, allowing users to select or deselect items easily.
To enable checkboxes, set the checkboxes property to true. Set autoClose to false to keep the popup open after each selection—the standard UX pattern when checkboxes are used.
The following snippet shows the minimal configuration for a MultiSelect with checkboxes.
<kendo-multiselect
[data]="listItems"
[checkboxes]="true"
[autoClose]="false">
</kendo-multiselect>The following example demonstrates how to enable checkboxes in the MultiSelect.
Controlling the Selection of Items
By default, clicking anywhere on a list item—not just the checkbox itself—toggles the item's selection state. To restrict toggling to the checkbox only, pass a settings object to checkboxes and set checkOnClick to false.
The following snippet shows how to configure the checkbox-only click behavior.
<kendo-multiselect
[data]="listItems"
[checkboxes]="{ checkOnClick: false }"
[autoClose]="false"
[(ngModel)]="value">
</kendo-multiselect>The following example demonstrates how to restrict toggling to the checkbox area only, so that clicking the item row outside the checkbox does not change the selection.