Alternative component to MultiSelect

đŸ§© Custom Components
1

Hi guys, all good?
I’d like to check if anyone else is using any multi select drop down that is not st.multiselect. The widget is good but it doesn’t work well for big lists. I am looking for a multi select box similar to this one:
image

2

Hi @digoplbr,

We made some changes to st.multiselect in 2020 to enable it to function better for large lists of items (see this GitHub Issue). Can you share the size of the list you’re working with? Is there specific behavior with st.multiselect you’re seeing that you’re trying to avoid?

1 Like
3

@Caroline thanks a lot for your answer. I am looking for a component that behaves similarly to the one I posted in the picture (limited size multi select dropdown that has an internal scroll bar). The issue with st.multiselect is that it resizes based on the amount of options. For long lists, the widget becomes huge. I tried some CSS limiting its size but it still looks a bit weird (my frontend knowledge is also limited).

4

@Caroline it would be nice to have a simple multi select drop down (similar to the picture I posted). St.multiselect doesn’t handle large lists very well. My front end skills are too basic to customize something but I am a bit surprised that I couldn’t find a component for this use case yet. This type of filter is used a lot in BI tools. I up voted one issue that I found on GitHub with a similar request. This component would probably make me retire other bi tools and only use streamlit. :slight_smile:

5

You could put the multiselect widget inside an expander element. It’s an extra step, but that would allow you to collapse away a multiselect with dozens of selections. Just a possible simple solution with what exists now. :slight_smile:

Also, I have created the effect of a multiselect before just using checkboxes inside an expander as well. With the new data editor, that is another option as soon as they add the functionality to lock a column (which should be soon). You could have one column listing the options (locked) and another boolean column letting people make selections.

2 Likes
6

@digoplbr Thanks for sharing that extra context! Is the main issue that you can see all of the options for st.multiselect? Are you basically looking for the ability to hide certain options or only make them discoverable via the search bar?

1 Like
7

Thanks. I tried variations of those approaches. It certainly helps but not ideal.

8

The behaviour I am looking for is similar to a simple multiselect dropdown (original post). Similar to st.selectbox but you could select multiple items (including all options) and also “string” search component content (similar to the picture I posted above). Take a look at the example below (now it is inside an expander).

image
image190×736 42 KB

9

Hey @digoplbr, that makes sense – we do have a GitHub Issue open here for a “select all” button. Can you clarify what you mean by “string” search component content?

10

@Caroline sure. The select all I solved adding a checkbox logic (not the best look but it works). However, the main issue is the size of the component (box increases based on the number of options). It would be nice to have a dropdown list with limited size which user could scroll up or down to see the options and select what they want. The search feature would be nice to navigate in the list. Here is an example:
P.S. Probably a new component or some variation of st.selectbox would be ideal. Multiselect is probably designed for short lists. It would be nice to have a component designed to handle big lists with multiple selection options.
image

1 Like
11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.