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

**URL:** <https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150>\
**Category:** Dash Python\
**Created:** [September 21, 2022, 6:37am UTC](https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150 "2022-09-21T06:37:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kycklingbiff](https://avatars.discourse-cdn.com/v4/letter/k/3e96dc/32.png) [@Kycklingbiff](https://community.plotly.com/u/Kycklingbiff)\
**Post date:** [September 21, 2022, 6:37am UTC](https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150/1 "2022-09-21T06:37:00Z")

</div>

Hello,

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.](https://github.com/plotly/dash), 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 🙂

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.

---

<div class="post-metadata">

**Author:** ![SamuelVT](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/samuelvt/32/20818_2.png) [@SamuelVT](https://community.plotly.com/u/SamuelVT)\
**Post date:** [September 21, 2022, 7:18am UTC](https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150/2 "2022-09-21T07:18:28Z")

</div>

Hello [Kycklingbiff](https://community.plotly.com/u/Kycklingbiff)

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

> [@mega Dash 2.6 Released - Background Callbacks, Unit Testing, Persistent Selections, Dropdown Features](https://community.plotly.com/t/dash-2-6-released-background-callbacks-unit-testing-persistent-selections-dropdown-features/66322):
>
> Update : [version 2.7.0 has been released](https://community.plotly.com/t/dash-2-7-released-directional-arrows-feature-map-bounds-and-datatable-filter-text/69676) since this was posted. We’re excited to announce that Dash 2.6.0 & 2.6.1 have been released rocket 2.6.1 contains a small bug fix for one of the features in 2.6.0. These are a backwards compatible releases and we recommend going straight to 2.6.1 . pip install dash==2.6.1 Official Changelog arrow_forward [Dash v2.6.0](https://github.com/plotly/dash/releases/tag/v2.6.0) and [Dash v2.6.1](https://github.com/plotly/dash/releases/tag/v2.6.1)Highlights arrow_down_smalltv [What’s new in Dash 2.6](https://youtu.be/YBgGbdM5FzM)[[new-in-dash-image]](https://youtu.be/YBgGbdM5FzM)Background Callbacks Backgroun…

> **[Dropdown | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/dropdown?_gl=1*feo4bu*_ga*OTk2MzU2Nzc5LjE2NjMwNjMzMzc.*_ga_6G7EE0JNSC*MTY2Mzc0MTAyNy4xNi4xLjE2NjM3NDQ0MzIuMC4wLjA.#dropdown-height)**
>
> The dcc.Dropdown component creates a customizable dropdown menu for selecting one or multiple items from a list of options.

---

<div class="post-metadata">

**Author:** ![Kycklingbiff](https://avatars.discourse-cdn.com/v4/letter/k/3e96dc/32.png) [@Kycklingbiff](https://community.plotly.com/u/Kycklingbiff)\
**Post date:** [September 21, 2022, 8:15am UTC](https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150/3 "2022-09-21T08:15:45Z")

</div>

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](https://dash.gallery/dash-drug-discovery/))

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/1/c1c74c0b4c014608c4848e1edae38831011d68de.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/b/8bdf424c79e81c0208a9b1abe4edab9b4e28b9e6.png)

However, when I add more, the height increases

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/5/3548014a1dbb8d47e214185929e2aea51c4433bd.png)

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

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [September 21, 2022, 2:45pm UTC](https://community.plotly.com/t/display-5-items-have-been-chosen-instead-of-red-green-blue-yellow-purple-in-a-dash-dropdown/68150/4 "2022-09-21T14:45:04Z")

</div>

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.

@snehilvj  
Is this possible with the [multiSelect](https://www.dash-mantine-components.com/components/multiselect) in Dash Mantine?
