CODEWITHSUNDEEP
pythonplotly-dash
Lukas
Lukas

Reputation: 451

How can user add their own values to a dash_core_components.Dropdown?

In my dropdown you should select from a list of workplaces but you should also be able to insert your own value.

How can I add a input field like "add value..." at the end of the list?

enter image description here

Upvotes: 2

Views: 1072

Answers (1)

bas
bas

Reputation: 15462

A basic version that implements Kay's suggestion of creating a callback that appends an option to the list of options. The following example uses a button click as Input and an input value as State:

from dash import Dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input, State

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "a", "value": "a"},
                {"label": "b", "value": "b"},
                {"label": "c", "value": "c"},
            ],
            value="a",
        ),
        dcc.Input(id="input", value="", placeholder="add value..."),
        html.Button("Add Option", id="submit", n_clicks=0),
    ]
)


@app.callback(
    Output("dropdown", "options"),
    Input("submit", "n_clicks"),
    State("input", "value"),
    State("dropdown", "options"),
    prevent_initial_call=True,
)
def add_dropdown_option(n_clicks, input_value, options):
    return options + [{"label": input_value, "value": input_value}]


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

Upvotes: 2

Related Questions