How to show/hide html elements in streamlit?

Using Streamlit
1

I am new to streamlit. I have two html controls like this

if(authenticated == 0):
username = st.text_input(“User Name:”,value="")
password = st.text_input(“Password:”, value="", type=“password”)

I want to hide both the control once the user authenticated. How to wrap inside some kind of div and hide the whole section (like display:none in html or based on id on the control etc)

2

Hey @inba, Welcome to the community,

You can use the session state for this,

if not state.user:
    username = st.text_input(“User Name:”,value="")
    password = st.text_input(“Password:”, value="", type=“password”)
    state.user = authenticate(username, password)
else:
    st.write(f"Hey {state.user.name} !")

For reference of Session state, Multi-page app with session state
Hope it helps !

1 Like
3

Thanks for the quick response. Is there any SessionState module which I am supposed to copied over to my apps.

Is there any alternatives like st.markdown(section) option to show and hide?

4

Yes you need to copy a session state module, I use this implementation https://github.com/ash2shukla/streamlit-heroku/blob/master/src/utils.py and you might be able to modify visibility of CSS classes with st.markdown but it will be highly unstable, I wouldn’t recommend doing that.