How to create Dynamic forms with variable number of elements?

[dozpav]

Hello

I’m trying to create a form that contains a variable number of input_text fields.

The number of elements depends on the clicks on the + and - buttons, which generate an additional input_text field or remove the input_text field that was clicked on.

Ideally it should work like this one Bootstrap Snippet Dynamic Form Fields - Add & Remove BS3 using HTML CSS Bootstrap jQuery

I thought to create a st.form and set up + and - buttons as form_submit_button with an onclick function that changes a variable called N that should ideally set the total amount of elements to be displayed on the front-end.

So far this approach has been pretty unsuccessfull…

Did somebody has any idea that could help to handle this scenario?

Thanks

[mathcatsand]

Does this example provide some insight?

Add a line item or row

I have a related example here. (Instead of a button to add one, it uses a slider to set the number of rows but the Streamlit mechanics are the same.) The example has the forth column being computed from other columns as an additional feature. https://mathcatsand-examples.streamlit.app/add_data [image] import streamlit as st st.write('# Solution using input widgets') # a selection for the user to specify the number of rows num_rows = st.slider('Number of rows', min_value=1, max_value=10) #…

[dozpav]

Hi @mathcatsand, it could definitely fit the purpose.
I’ll make some tests and keep this topic updated.
Thanks again