Display "5 items have been chosen" instead of "[Red] [Green] [Blue] [Yellow] [Purple]" in a Dash Dropdown


I am trying to create an application where I need a Multi-Dropdown which have a lot of possible values that can be chosen.

However, when I have chosen more values than the “regular” Dropdown can fit, the height of the dropdown increases. I assume this is done to allow the user to see all the chosen items.

Instead of an increased height of the dropdown I would like the chosen items to change into a text that tells the user how many items that have been checkedm, for example “x items have been chosen”.

I went to the github for Dash, GitHub - plotly/dash: Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required., and located the file for the Dropdown. In that file there is a callback named “selectedOption” which I thought was possible to do some changes to too achieve my idea.

When I tried to find this file on my computer I was not able to locate it. My assumption here is that this is only used as a foundation and is not included in the installed package.

My question is, if it is possible to solve my problem either by a predefined function or any other easy solution, or do I have to create my own component? In that case I have to look over other possibilities due to my lack of knowledge, and might return to this solution when I have learned more :slight_smile:

Since I am asking a question regarding Dropdown I might ask another in the same post.
Is it possible to not show the possible values until the user have searched with x number of characters? There might be performing issues if the list get’s to long.

Hello Kycklingbiff

Take a look this information, I hope this can help.

Hello Samuel,

Thanks for the quick reply.

I looked through that post and I couldn’t find the solution of my issue. That is great that it’s possible to adjust the height when the dropdown is “open”.

I might have been a bit loose in my description. It might be easier if I explain with pictures (taken from Dash)

When 4 values are chosen, the dropdown keeps it size.

However, when I add more, the height increases

Instead, I would like the size to remain the same and (in this example) say “14 items slected”.

hi @Kycklingbiff
I don’t think this is possible with the current Dash Dropdown props. You might have to create your own component or tweak the existing one.

Is this possible with the multiSelect in Dash Mantine?