# Dynamic Input on forms

**URL:** <https://community.plotly.com/t/dynamic-input-on-forms/45159>\
**Category:** Dash Python\
**Created:** [September 21, 2020, 3:15pm UTC](https://community.plotly.com/t/dynamic-input-on-forms/45159 "2020-09-21T15:15:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![felipeboffnunes](https://avatars.discourse-cdn.com/v4/letter/f/a587f6/32.png) [@felipeboffnunes](https://community.plotly.com/u/felipeboffnunes)\
**Post date:** [September 21, 2020, 3:15pm UTC](https://community.plotly.com/t/dynamic-input-on-forms/45159/1 "2020-09-21T15:15:05Z")

</div>

I want to make a form where the user can add new inputs if he needs. For example, a user is completing a form about his favorite food, and I have an Input for food, where he types Apple. Now, I have a button which lets the user add another line of input, this is a different Input! The user will type another food, and I can add a different ID to this Input. But I still can’t access both inputs.

Heres an example.

```auto
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(
    external_stylesheets=[dbc.themes.LUX],
    # these meta_tags ensure content is scaled correctly on different devices
    # see: https://www.w3schools.com/css/css_rwd_viewport.asp for more
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ],
)

content = html.Div(id="page-content")
app.layout = html.Div([dcc.Location(id="url"), content])

dynamic_input = html.Div([
    html.Div([
        dcc.Input(id="input-0"),
    ], id="dynamic-input"),
    dbc.Button("Button", id="button"),
    dcc.Store(id="number-input", storage_type="local"),
    html.Div(id="callback-print")
])

@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
    if pathname in ["/", "/page-1"]:
        return dynamic_input
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )

@app.callback(
    [Output("dynamic-input", "children"), 
     Output("number-input", "children")], 
    [Input("button", "n_clicks")],
    [State("number-input", "children")])
def add_input(clicks, number):
    global number_inputs
    if clicks:
        new_input = []
        for x in range(int(number)):
            new_input.append(dcc.Input(id=f"input-{x}"))
        number_inputs = int(number) + 1
        return new_input, number_inputs
    number_inputs = 1
    return dcc.Input(), 1

number_inputs = 1

@app.callback(
    Output("callback-print", "children"),
    [Input(f"input-{x}", "value") for x in range(number_inputs)]
)
def print_all(*inputs):
    print(number_inputs)
    print(inputs)
    for i in inputs:
        print(i)
    return None

if __name__ == " __main__":
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 21, 2020, 5:48pm UTC](https://community.plotly.com/t/dynamic-input-on-forms/45159/2 "2020-09-21T17:48:17Z")

</div>

Check out pattern matching callbacks 🙂