Is it possible to create horizontal radio buttons?
7 Likes
Hi @avinash and welcome to the forum! 
Right now that’s not supported in Streamlit, but we are working on it (see our Roadmap for more info). Feel free to add your ideas to Customizable Layout for Streamlit.
And thanks for using Streamlit!
I found that this works:
st.write('<style>div.Widget.row-widget.stRadio > div{flex-direction:row;}</style>', unsafe_allow_html=True)
But it it going to be applied to all radiobutton of the page. It feels a bit hacky and might break at a future release of streamlit… so use with caution
7 Likes
Currently it works without the “Widget” part:
st.write('<style>div.row-widget.stRadio > div{flex-direction:row;}</style>', unsafe_allow_html=True)
14 Likes
Well done.
Can we let radio text move to bottom or top of the radio button?
The above examples helped. I modified the above code and centered the radio buttons.
st.write(‘div.row-widget.stRadio > div{flex-direction:row;justify-content: center}’, unsafe_allow_html=True)
st.write('<style>div.row-widget.stRadio > div{flex-direction:row;justify-content: center;} </style>', unsafe_allow_html=True)
st.write('<style>div.st-bf{flex-direction:column;} div.st-ag{font-weight:bold;padding-left:2px;}</style>', unsafe_allow_html=True)
choose=st.radio("导航",("视频","图片","音乐"))
5 Likes