Question about how to use properly the checkboxes

[paudom]

Hi, I’m wondering how to use properly the checkboxes or how to do certain thing I’m working to.

I have a container with three images that are shown horizontally. At the bottom of each image a checkbox is presented, so the checkboxes are also horizontally placed. When I select one, it performs some operation and shows that image into another container. (No problem here)

But when I select another checkbox the first one is not unchecked.

I’ve tried to access the widgets, using their key, but I didn’t find any function that allows me to get the widget and change it’s status.

Here I show what I mean:

Could someone help me find the correct way to get this behaviour? Is this possible to get using another widget? I know that using radio, once you select one, the other options unselect, but that only shows vertical radio buttons and not horizontally at the bottom of each image.

I searched the documentation and even issues, but I didn’t find any useful answer. Also I find that the documentation doesn’t explain well what exactly does the “key” of the widgets. Because I would want to get the widget and change it’s status using their keys.

[Marisa_Smith]

Hi @paudom,

First, welcome to the Streamlit Community!

Next, thank you for putting so much thought into your question (pictures and details), it makes it easy to understand and therefore easier to answer!

TLDR: The checkbox widgets are not linked, meaning if you check one the other wont ‘know’ and un-check, so you can’t use them in this way.

I would suggest using st.selectbox as this forces the user to choose one option from many. You are correct on the documentation being light on what the key option does (we are working to improve this).

The ‘key’ is actually just a label to distinguish between two widgets that are very similar. You can’t access the state of a widget through this key.

Details:
here is a mock up of what the st.selectbox would look like (with its code):

import streamlit as st

col1, col2, col3 = st.beta_columns(3)

with col1:
    st.image('img_1.png',use_column_width=True,caption='Picture 1')

with col2:
    st.image('img_2.jpg',use_column_width=True,caption='Picture 2')

with col3:
    st.image('img_3.jpg',use_column_width=True,caption='Picture 3')

pic_choice = st.selectbox('Your Picture Choice:', 
    ['Picture 1','Picture 2','Picture 3'])
st.write('You selected:', pic_choice)

the mock up (my picture heights are different so it doesn’t look as streamlined as yours! ):

As for the key, I will show you an example of when you might use this.
Let’s say, you wanted the user of your app to select 2 pictures by using 2 st.selectbox's. It makes sense that they should have the same arguments passed into the widget:

pic_choice = st.selectbox('Your Picture Choice:', 
    ['Picture 1','Picture 2','Picture 3'])
st.write('You selected:', pic_choice)

pic_choice_2 = st.selectbox('Your Picture Choice:', 
    ['Picture 1','Picture 2','Picture 3'])
st.write('You selected:', pic_choice_2)

however, this will throw you an error:

As you can see from the error message, Streamlit automatically generates a key for you when you don’t specify one with the key argument. But because these widgets are identical in their name and options, the auto-generated key is the same. This will confuse python because it will not know which of the two widgets your referring to.

The way around this is to use the key argument and choose your own unique key for one (or both if you want) widgets:

pic_choice = st.selectbox('Your Picture Choice:', ['Picture 1','Picture 2','Picture 3'])
st.write('You selected:', pic_choice)

pic_choice_2 = st.selectbox('Your Picture Choice:',
['Picture 1','Picture 2','Picture 3'], key='2nd_pic_choice')
st.write('You selected:', pic_choice_2)

This fixes the error!

Happy Streamlit-ing!
Marisa

[paudom]

Thank you so much for the answer Marisa!

Happy to hear that changes into the “key” documentatio will be made.