Creating a Checkbox Group with Maximum Selection Limit in KendoReact

Updated on Dec 19, 2025

Environment

Product Version	12.0.0
Product	Progress® KendoReact Checkbox

Description

I want to create a checkbox list with a maximum selection limit and include it in a form. The requirement is to disable unselected checkboxes when the maximum limit is reached.

Solution

Create a custom checkbox component that manages selection state and enforces the maximum limit:

tsx

const MyCustomCheckbox = (fieldRenderProps: FieldRenderProps) => {
    const { validationMessage, visited, value, onChange, onFocus, onBlur } = fieldRenderProps;
    const [selectedItems, setSelectedItems] = React.useState(new Set(value || []));

    const handleCheckboxChange = React.useCallback(
        (event: any, index: number) => {
            setSelectedItems((prevSelected) => {
                const updatedSelected = new Set(prevSelected);
                if (event.target.checked) {
                    updatedSelected.add(index);
                } else {
                    updatedSelected.delete(index);
                }
                onChange({ value: Array.from(updatedSelected) });
                return updatedSelected;
            });
        },
        [onChange]
    );

    return (
        <div onFocus={onFocus} onBlur={onBlur}>
            {[...Array(6)].map((_, index) => {
                const isChecked = selectedItems.has(index);
                const isDisabled = !isChecked && selectedItems.size >= 2; // Max 2 selections

                return (
                    <Checkbox
                        key={index}
                        label={`Option ${index + 1}`}
                        checked={isChecked}
                        onChange={(event) => handleCheckboxChange(event, index)}
                        disabled={isDisabled}
                    />
                );
            })}
            {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
    );
};

Here is an example demonstrating this approach:

Change Theme

Theme

Loading ...

See Also

• KendoReact Checkbox Documentation
• KendoReact Form Custom Components