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

Creating a Checkbox Group in Kendo UI for Vue

Updated on Nov 18, 2025

Environment

Product	Kendo UI for Vue Checkbox
Version	7.0.0

Description

I want to create a Checkbox Group in Kendo UI for Vue. The framework does not include a built-in CheckboxGroup component, so I need an alternative solution for achieving the desired functionality.

This knowledge base article also answers the following questions:

How to implement a Checkbox Group in Kendo UI for Vue?
How to iterate over an array to create multiple checkboxes in Vue?
How to add mass selection logic in a custom Checkbox Group?
How to limit the number of selected checkboxes?

Solution

To create a Checkbox Group, implement a custom solution by iterating over an array to render individual Kendo UI Checkbox components.

Basic Implementation

Define an array containing the options for the checkboxes.
Use Vue's v-for directive to loop over the array elements and render a Checkbox for each element.
Add custom logic for mass selection and define conditions to disable checkboxes based on your requirements.

Example with Select All and Limited Selection

The following example demonstrates:

A "Select All" checkbox that controls all individual checkboxes
Individual checkboxes for each option
Logic to limit selection to a maximum of 2 items (unless "Select All" is used)
Automatic disabling of unselected checkboxes when the limit is reached

Change Theme

Theme

Loading ...

Notes

This implementation uses the Kendo UI for Vue Checkbox component, which provides consistent styling and behavior.
The selection limit (2 in this example) can be easily adjusted by modifying the condition in the :disabled binding.
You can extend this pattern to add validation, custom styling, or integration with forms.