Limit selectable values on Dropdown

Hi,

How to limit the maximum selectable options in dropdown?

For example, The user should be able to select options up to 3 as the maximum.

image

You can add this to an onActionPerformed event on the dropdown or to a change script on the value property (both should work, though I prefer the event solution):

if self.props.value:
	self.props.value = self.props.value[:3]
2 Likes

Thanks :slight_smile:

Just as a quick note, this doesn't prevent the user from attempting to select additional options - but it will recognize that too many have been selected and remove the "last" selected option.

2 Likes

Thanks for the information. What would be the best approach here?

I do think this is probably a good approach, and shouldn't impact you unless you have expensive bindings based on the selected options.

An Alternate approach is to place a change script on Dropdown.props.value which disables any options which are not currently selected if the count of selected options reaches your max.

# untested pseudo-code
if currentValue and len(currentValue.value) >= 3:
    too_many_so_disable = True
else:
    too_many_so_disable = False
for option in self.props.options:
    if option.value not in currentValue.value:
        option.disabled = too_many_so_disable

But keep in mind that this would clobber any custom option disability already in place.