Multiselect items displayed as in a box

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

Hey @zhawktw,

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

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?

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

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.

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

2 Likes