Multiselect items displayed as in a box

[zhawktw]

greeting,
I am new to streamlit and trying to use multiselect to create a GUI for user to add and delete accounts as shown in the screen attached.

multiselect displays items in a dropdown menu by default. is there way to display all the multiselect items in a box for user to select or deselect as shown in the screen attached?

any help will be greatly appreciated!
Peter

[Caroline]

Hey @zhawktw,

Check out this post that covers a few different approaches for implementing this functionality:

@Marisa_Smith

Hey @Venide,
First, Welcome to the Streamlit Community!!!

EXCELLENT QUESTION!! I’m so glad you asked! Let us dig into all the possibilities!

Option 1: all through code
This bit of code will put the checkbox after your multiselect, but if it’s checked, the options won’t show up in the multiselect as it currently does.

selected_options = st.multiselect("Select one or more options:",
    ['A', 'B', 'C'])

all_options = st.checkbox("Select all options")

if all_options:
    selected_options = ['A', 'B', 'C']

selected_options # this uses MAGIC to print the options to the screen!

Option 2: unique option in the widget
This lets the user have a drop-down option in the multiselect that takes priority and is displayed in the widget itself

selected_option_2 = st.multiselect("Select one or more options:",['A', 'B', 'C', 'All'])

if "All" in selected_option_2:
    selected_option_2 = ['A', 'B', 'C']

selected_option_2

Option 3: Containers (my fav)
This is my personal favourite! If you use the st.beta_container you can have the best of both worlds! a multiselect that populates with the options that the user selects and a checkbox the appears after it. This is because, with the power of containers, you can place objects and widgets out of order from how they are coded (yes you read that right! )

container = st.container()
all = st.checkbox("Select all")
 
if all:
    selected_options = container.multiselect("Select one or more options:",
         ['A', 'B', 'C'],['A', 'B', 'C'])
else:
    selected_options =  container.multiselect("Select one or more options:",
        ['A', 'B', 'C'])

Here is a gif of an app where I put all these options side-by-side you you can see the differences I mean!

Happy Streamlit-ing!
Marisa

[zhawktw]

thank you @Caroline . appreciate your answer. Unfortunately it didn’t really address my question.

the problem with st.multiselect is that you have to click a dropdown menu then select the items needed. For the project I am working on, there are around 500 items. it is pretty difficult for users to scroll the drop down menu and select items. is there way to display all the items in a box and let users scroll and select the items needed similar to the screenshot below?

[Goyo]

Short of writing a custom component, using data_editor() with an extra boolean column is the closest you can get.

How do I get dataframe row-selections from a user? - Streamlit Docs

[Caroline]

Oh I get what you’re asking now – sorry, I thought you were just hoping to add a “select all” button.

As @Goyo mentioned, a custom component would be necessary to accomplish exactly what you’re looking for – there are a few related custom components created by other community members, but unfortunately, I don’t think there is an existing component for this exact functionality.

[ji_haoran]

You can try transfer in my custom components StreamlitAntdComponents.
Detailed usage in demo app.