Make the radio button show as a floating list of buttons

[mat-b]

I needed this because of design requirements of my application.
Feel free to comment or reuse it.
I know that CSS-styling is not perfect solution, but it can make my application look as needed in terms of UIX, while still using streamlit

This code transforms the traditional radio input (selection of one option) to the list of buttons showing in rows.
You can use st.radio as you would normally do. This is just visual change.

import streamlit as st

def render_page():
    add_styling()

    st.write(f"Hello, please select on of the following options")
    radio = st.radio("Select option", ["lorem", "ipsum", "another option", "one more option", "option 4", "option 5", "option 6", "option 7", "another option 8"], label_visibility="collapsed")
    if st.button("Select"):
        st.write(f"Selected option: {radio}")

def add_styling():
    st.html("""
        <style>
            /* convert radio to list of buttons */
            div[role="radiogroup"] {
                flex-direction:row;
            }
            input[type="radio"] + div {
                background: #63ADD2 !important;
                color: #FFF;
                border-radius: 38px !important;
                padding: 8px 18px !important;
            }
            input[type="radio"][tabindex="0"] + div {
                background: #E6FF4D !important;
                color: #17455C !important;
            }
            input[type="radio"][tabindex="0"] + div p {
                color: #17455C !important;
            }
            div[role="radiogroup"] label > div:first-child {
                display: none !important;
            }
            div[role="radiogroup"] label {
                margin-right: 0px !important;
            }
            div[role="radiogroup"] {
                gap: 12px;
            }
        </style>
    """)


render_page()

It changes the flex direction to row, removes the traditional radio “circles” icons and makes the option labels look as buttons.

With my colours it looks like this: