Horizontally align `st.text_input` and `st.form_submit_button` in `st.form` in the same line

[Night_Starry]

Hi all, as the title suggests, I would like to have st.text_input and st.form_submit_button lie in the same line. Currently, my code looks like this:

instr = 'Hi there! Enter what you want to let me know here.'
with st.form('chat_input_form'):
    if (prompt := st.text_input(
        instr,
        value=init_prompt,
        placeholder=instr,
        label_visibility='collapsed'
    )) and st.form_submit_button('Chat'):
        # Do something with the inputted text heere

Right now, the submit button is below rather than horizontally next to the input box. Is there any way to have st.text_input and st.form_submit_button in the same line?

[tonykip]

Hi @Night_Starry,

Thanks for posting!

You can use columns to get the design that you described. Here’s an example code to do that:

import streamlit as st

instr = 'Hi there! Enter what you want to let me know here.'

with st.form('chat_input_form'):
    # Create two columns; adjust the ratio to your liking
    col1, col2 = st.columns([3,1]) 

    # Use the first column for text input
    with col1:
        prompt = st.text_input(
            instr,
            value=instr,
            placeholder=instr,
            label_visibility='collapsed'
        )
    # Use the second column for the submit button
    with col2:
        submitted = st.form_submit_button('Chat')
    
    if prompt and submitted:
        # Do something with the inputted text here
        st.write(f"You said: {prompt}")

It will look something like this:

I hope you find this helpful.

[Night_Starry]

Thank you! Do you know how to make the extra space right next to the Chat button go away?

[tonykip]

Which extra space? Within the Chat button box?

[Night_Starry]

[Night_Starry]

Like the white space next to the Chat button (see the image I posted).

[Night_Starry]

Hi Tony, sorry to bother you, but have you had a chance to look into my issue? I actually have a scheduled upcoming presentation, and I’d really appreciate it if you could provide me with some hints to fix it.

[tonyhollaar]

Please adjust the relative size of the columns like so:

col1, col2 = st.columns([9,1]) 

To get output:

Full code below with adjustment based on code from @tonykip:

import streamlit as st

instr = 'Hi there! Enter what you want to let me know here.'

with st.form('chat_input_form'):
    # Create two columns; adjust the ratio to your liking
    col1, col2 = st.columns([9,1]) 

    # Use the first column for text input
    with col1:
        prompt = st.text_input(
            instr,
            value=instr,
            placeholder=instr,
            label_visibility='collapsed'
        )
    # Use the second column for the submit button
    with col2:
        submitted = st.form_submit_button('Chat')
    
    if prompt and submitted:
        # Do something with the inputted text here
        st.write(f"You said: {prompt}")

Note: you can use whatever numbers including large numbers to get your desired alignment in Streamlit, for example:

col1, col2 = st.columns([300, 145]) 

Please mark this as solution if this worked for you. Otherwise please note what is still an issue!

[Night_Starry]

Wow, that works like a charm. Thank you! Now I feel stupid for not trying this earlier.