Larger buttons: How to adjust size of toggle button or checkbox?

[Max42]

I want to build an app that works on a tablet and therefore would benefit from larger buttons. This seems to be not a straight forward way in streamlit. While it is easy to adjust the CSS style of the st.button, I cannot find the style for st.toggle or st.checkbox to increase the size.

Here is what I did so far:
One can switch to a landscape layout with st.set_page_config(layout="wide").
For larger font sizes one can use the workaround to use LaTeX-mode on the labels "$\textsf{\Large Trigger}$" and manipulate the CSS style to increase the size of standard buttons, I struggle to enlarge the toggle widget st.toggle().

import streamlit as st


# enable for wide layout that uses the entire width of the browser
st.set_page_config(layout="wide")

# Custom CSS to styles
st.markdown("""
    <style>
        button {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }
    </style>
""", unsafe_allow_html=True)

# create two columns to structure the app
columns = st.columns([1, 1])

with columns[0]:
    triggered = st.button(
        r"$\textsf{\Large Trigger}$",
        type="primary",
        use_container_width=True
    )

with columns[1]:
    toggle = st.toggle(
        r"$\textsf{\Large show result}$",
        value=triggered,
    )

Call streamlit run ***.py and you get:

How to make that toggle equally large as the button?

[blackary]

Mostly it’s just a matter of fiddling with CSS to get the look you want, and inspecting the different html elements involved using the browser debugger tools.

You can do something like this for example, though I’m quite sure our designers would never forgive me for how bad this looks:

import streamlit as st


st.write("This is normal text")

st.toggle("Testing")

css = """
<style>
[data-baseweb="checkbox"] [data-testid="stWidgetLabel"] p {
    /* Styles for the label text for checkbox and toggle */
    font-size: 3.5rem;
    width: 300px;
    margin-top: 1rem;
}

[data-baseweb="checkbox"] div {
    /* Styles for the slider container */
    height: 3rem;
    width: 4rem;
}
[data-baseweb="checkbox"] div div {
    /* Styles for the slider circle */
    height: 2.8rem;
    width: 2.8rem;
}
[data-testid="stCheckbox"] label span {
    /* Styles the checkbox */
    height: 4rem;
    width: 4rem;
}
</style>
"""

if st.checkbox("Apply css", value=True):
    st.write(css, unsafe_allow_html=True)

You’ll have to fiddle with the numbers to make it work well for your use-case