Multiselect Dropdown with chips and count

advanced-prototyping
repeater-widget

#1

Hi all,
First-time poster. Apologies if this has already been posted somewhere.
I am trying to prototype a Multi-select Dropdown that adds the chips when a selection is made, buts it is only limited to 2 chips, and the rest of the selection will show up as a number count (+3 selected).

For reference below is the MUI component I am trying to replicate.
https://mui.com/material-ui/react-autocomplete/#limit-tags

Any help will be appreciated. Thank you in advance.

Multiselect_limit_chips_add_count.rp (73.9 KB)


#2

Hi @rahuld, you can use a global variable to store how many piles are selected and to add a few conditions so that whenever you have more than two piles, the label is shown, and vice versa. I’ve attached the file with these edits so you can take a look. Please let me know if you have any additional questions! Multiselect_limit_chips_add_count_AxureEdit.rp (76.6 KB)


#3

@Tanya_Axure Thank you so much. Really appreciate the help. This is exactly what I was trying to achieve. I was not using the global variables was just playing with the local variables and I was not able to achieve the results.