Multi-select or checkboxes - Can you limit max number of selections? | Appsmith | Page 1

Hello! I'm AppyBot, your Appsmith support assistant.

In Appsmith, you can set a maximum number of selections for multi-select or checkbox inputs by using JavaScript to control the behavior based on the user's selections. Here?s how you can implement a limit on the number of selections:

For a MultiSelect Widget:

Assume your MultiSelect widget is named MultiSelect1.
You can add a JavaScript function to disable further selections once the limit is reached.

Here's an example of how you can set up a function in a JSObject to enforce a maximum selection limit:

export default {
enforceMaxSelections: (selectedValues) => {
const MAX_SELECTIONS = 3;
if (selectedValues.length > MAX_SELECTIONS) {
return selectedValues.slice(0, MAX_SELECTIONS);
}
return selectedValues;
}
}

Then, bind this function to the onSelectionChange property of the MultiSelect widget:

{?{ JSObject1.enforceMaxSelections(MultiSelect1.selectedOptionValues) }?}

For a Checkbox Group Widget:

If you are using a Checkbox Group widget named CheckboxGroup1, you can apply a similar logic.

Here's how you can modify the function for a Checkbox Group:

export default {
enforceMaxSelectionsCheckbox: (selectedValues) => {
const MAX_SELECTIONS = 3;
if (selectedValues.length > MAX_SELECTIONS) {
return selectedValues.slice(0, MAX_SELECTIONS);
}
return selectedValues;
}
}

And bind this function similarly:

{?{ JSObject1.enforceMaxSelectionsCheckbox(CheckboxGroup1.selectedOptionValues) }?}

This setup ensures that no more than the specified number of options can be selected. If you need further customization or help, feel free to ask!

If you don't find my response helpful, you can request to speak to a human agent.

#Multi-select or checkboxes - Can you limit max number of selections?