Remove the preselection of radio buttons

🎈 Using Streamlit
1

Hello,
I am trying to add a guessing game to my Streamlit app with radio buttons.
Firstly I want to see the image, then I want to click the category the image belongs to, finally see the result and continue. But I am having a problem with the radio buttons, when I click a button I actually select the category for the next image without seeing it. How can I fix it?

deeppainting

2

There is no option for that. I have tried something with checkboxes, but you should find a way to make the others disabled if you want checkboxes.
For this option, I would only suggest setting the radio to a value to a ineffective button such as “Select”, but it is not what you wanted.

Great app though!

4

Yes I’ve already tried to set an ineffective button but it didn’t work…
Thank you so much for your reply!

5

Not sure if you still need it, but for others:
You can add an additional dummy radio button at the top and set its CSS to invisible with size 0. Through code you can write custom logic to ignore that dummy radio button selection.
For CSS, you can write something like:

st.markdown(
        """
    <style>
        div[role=radiogroup] .st-cs:first-of-type {
            visibility: hidden;
            height: 0px;
        }
    </style>
    """,
        unsafe_allow_html=True,
    )
1 Like
6

Thanks, man, great cheat btw!
I used the following CSS:

st.markdown(
        """
    <style>
        div[role=radiogroup] label:first-of-type {
            visibility: hidden;
            height: 0px;
        }
    </style>
    """,
        unsafe_allow_html=True,
    )
1 Like