Column layout inside submit form streamlit

Question

I would like to have two selectbox elements side by side in a st.form using a st.columns layout. Unfortunately the select boxes are out of the form. Here is some reproducible code:

import streamlit as st

st.header("Selectbox side by side in form")

col1, col2 = st.columns(2)

with st.form('Form1'):
    col1.selectbox("Select track",  ["track 1", "track 2"])
    col2.selectbox("Select track 2",  ["track 1", "track 2"])
    st.slider("Select your race finish position", 1, 12, key="number")
    st.form_submit_button('Submit your race')

Output:

As you can see the select boxes are out of the form which is not what I want. If you use only one selectbox it is of course inside the form, but I would like to have two select boxes side by side. So I was wondering if anyone how to use a column layout inside a form in streamlit?

Answer 1

The columns container needs to be created within the form's context manager :

import streamlit as st

st.header("Selectbox side by side in form")

with st.form("Form1"):
    col1, col2 = st.columns(2) # << here
    col1.selectbox("Select track", ["track 1", "track 2"])
    col2.selectbox("Select track 2", ["track 1", "track 2"])
    st.slider("Select your race finish position", 1, 12, key="number")
    st.form_submit_button("Submit your race")