Adding dropdown and input box interactively


I want to give the app user the possibility to add n-number of dropdowns and n-number of input boxes by clicking a button n-number of times. So at each click, it creates a multi-output (of dropdown and input box).

How would I implement this?

Thank you!

1 Like

kind of like this below?

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State, MATCH, ALL

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div('Dash To-Do list'),
    html.Button("Add", id="add"),
    html.Button("Clear Done", id="clear-done"),

style_todo = {"display": "inline", "margin": "10px"}
style_done = {"textDecoration": "line-through", "color": "#888"}

        Output("list-container", "children"),
        Output("new-item", "value")
        Input("add", "n_clicks"),
        Input("new-item", "n_submit"),
        Input("clear-done", "n_clicks")
        State("new-item", "value"),
        State({"index": ALL}, "children"),
        State({"index": ALL, "type": "done"}, "value")
def edit_list(add, add2, clear, new_item, items, items_done):
    triggered = [t["prop_id"] for t in dash.callback_context.triggered]
    adding = len([1 for i in triggered if i in ("add.n_clicks", "new-item.n_submit")])
    clearing = len([1 for i in triggered if i == "clear-done.n_clicks"])
    new_spec = [
        (text, done) for text, done in zip(items, items_done)
        if not (clearing and done)
    if adding:
        new_spec.append((new_item, []))
    new_list = [
                id={"index": i, "type": "done"},
                options=[{"label": "", "value": "done"}],
                style={"display": "inline"},
                labelStyle={"display": "inline"}
            html.Div(text, id={"index": i}, style=style_done if done else style_todo)
        ], style={"clear": "both"})
        for i, (text, done) in enumerate(new_spec)
    return [new_list, "" if adding else new_item]

    Output({"index": MATCH}, "style"),
    Input({"index": MATCH, "type": "done"}, "value")
def mark_done(done):
    return style_done if done else style_todo

    Output("totals", "children"),
    Input({"index": ALL, "type": "done"}, "value")
def show_totals(done):
    count_all = len(done)
    count_done = len([d for d in done if d])
    result = "{} of {} items completed".format(count_done, count_all)
    if count_all:
        result += " - {}%".format(int(100 * count_done / count_all))
    return result

if __name__ == "__main__":
1 Like

Thank you, that helps a lot!