Set order for tab key in a form

Community Cloud
,
1

Hi,

I’ve just created my first form using Streamlit and I would like to know if it is possible to set the order in which input fields are accessed when the Tab key is pressed? My form consists of 2 columns which looks aesthetically pleasing, but when I use the Tab key, by default the next box it goes to is in the same column, whereas I would like it to jump into the next column i.e.
col1 col2
Field1 → Field1
Field2 → Field2
Field3 → Field3
Field4 → Field4

I guess I’m trying to make the Tab key work from left to right or in a row, rather than in a column, is this possible?

Here’s my code:

with st.form(key='columns_in_form'):
    col1,col2 = st.columns(2)
    
    jobID = st.text_input('Job ID',value=str(ID), placeholder='Enter either Job-Part No. PO No. or any other unique identifier')

    with col1:
        binWidth = st.number_input('Sheet Width', step=0.5)
        marginTop = st.number_input('Top Margin', step=0.5)
        marginLeft = st.number_input('Left Margin', step=0.5)
        theBleed = st.number_input('Bleed', step=0.5)

    with col2:
        binHeight = st.number_input('Sheet Height', step=0.5)
        marginBottom = st.number_input('Bottom Margin', step=0.5)
        marginRight = st.number_input('Right Margin', step=0.5)
        additionalOptions = st.selectbox("Additional Options",options=["Allow Rotation", "Swap Artwork Orientation"], index=None)

    algoOptions = [
"1 GuillotineBssfSas",
"2 GuillotineBssfLas",
"3 GuillotineBssfSlas",
"4 GuillotineBssfLlas",
"5 GuillotineBssfMaxas",
"6 GuillotineBssfMinas",
"7 GuillotineBlsfSas",
"8 GuillotineBlsfLas",
"9 GuillotineBlsfSlas",
"10 GuillotineBlsfLlas",
"11 GuillotineBlsfMaxas",
"12 GuillotineBlsfMinas",
"13 GuillotineBafSas",
"14 GuillotineBafLas",
"15 GuillotineBafSlas",
"16 GuillotineBafLlas",
"17 GuillotineBafMaxas",
"18 GuillotineBafMinas",
"19 MaxRectsBl",
"20 MaxRectsBssf",
"21 MaxRectsBaf",
"22 MaxRectsBlsf",
"23 SkylineBl",
"24 SkylineBlWm",
"25 SkylineMwf",
"26 SkylineMwfl",
"27 SkylineMwfWm",
"28 SkylineMwflWm"]
    theAlgo = st.selectbox("Choose packing alghorithm",options=algoOptions,index=1)
    theCSV = st.file_uploader('Choose a CSV file', type='csv')
    submit = st.form_submit_button('Submit')

Many thanks,
Nik

2

I think you will have to create independent pairs of columns to get that effect

tab_order_cols

Code: 
with st.form(key="columns_in_form"):
    col1, col2 = st.columns(2)

    with col1:
        binWidth = st.number_input("Sheet Width", step=0.5)
    with col2:
        binHeight = st.number_input("Sheet Height", step=0.5)

    col1, col2 = st.columns(2)
    with col1:
        marginTop = st.number_input("Top Margin", step=0.5)
    with col2:
        marginBottom = st.number_input("Bottom Margin", step=0.5)

    col1, col2 = st.columns(2)
    with col1:
        marginLeft = st.number_input("Left Margin", step=0.5)
    with col2:
        marginRight = st.number_input("Right Margin", step=0.5)

    col1, col2 = st.columns(2)
    with col1:
        theBleed = st.number_input("Bleed", step=0.5)
    with col2:
        additionalOptions = st.selectbox(
            "Additional Options",
            options=["Allow Rotation", "Swap Artwork Orientation"],
            index=None,
        )

    btn = st.form_submit_button("Submit")
2 Likes
3

That’s exactly what I was after, thanks very much for your help.

Nik

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.