dcc_dropdown

dcc_dropdown is a component that creates a customizable dropdown menu for selecting one or multiple items from a list of options.

Examples

Find a few usage examples below.

Basic Dropdown

An example of a basic dropdown without any extra properties.

using Dash
app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        id="demo-dropdown",
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
    ),
    html_div(id="dd-output-container")

end

callback!(
    app,
    Output("dd-output-container", "children"),
    Input("demo-dropdown", "value"),
) do input_1
    return "You have selected \"$input_1\""
end

run_server(app, "0.0.0.0", debug=true)

Multi-Value Dropdown

A dropdown component with the multi property set to True
will allow the user to select more than one value
at a time.

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        multi = true
    )
end

run_server(app, "0.0.0.0", debug=true)

The searchable property is set to True by default on all
dcc_dropdown components. To prevent searching the dropdown
value, just set the searchable property to False.
Try searching for ‘New York’ on this dropdown below and compare
it to the other dropdowns on the page to see the difference.

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        searchable=false
    )
end

run_server(app, "0.0.0.0", debug=true)

The clearable property is set to True by default on all
dcc_dropdown components. To prevent the clearing of the selected dropdown
value, just set the clearable property to False

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        clearable=false
    )
end

run_server(app, "0.0.0.0", debug=true)

Placeholder Text

The placeholder property allows you to define
default text shown when no value is selected.

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        placeholder="Select a city"
    )
end

run_server(app, "0.0.0.0", debug=true)

Disable Dropdown

To disable the dropdown just set disabled to True.

using Dash

app = dash()

app.layout = html_div() do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
        disabled=true
    )
end

run_server(app, "0.0.0.0", debug=true)

Disable Options

To disable a particular option inside the dropdown
menu, set the disabled property in the options.

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC", disabled=true),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF", disabled=true)
        ]
    )
end

run_server(app, "0.0.0.0", debug=true)

Dynamic Options

This is an example on how to update the options on the server
depending on the search terms the user types. For example purpose
the options are empty on first load, as soon as you start typing
they will be loaded with the corresponding values.

using Dash

options = [
    (label = "New York City", value = "NYC"),
    (label = "Montreal", value = "MTL"),
    (label = "San Francisco", value = "SF")
]

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do

    html_label(["Single Dynamic Dropdown", dcc_dropdown(id="demo-dropdown-2") ]),

    html_label(["Multi Dynamic Dropdown", dcc_dropdown(id="demo-dropdown-3", multi=true) ])

end

callback!(
    app,
    Output("demo-dropdown-2", "options"),
    Input("demo-dropdown-2", "search_value"),
) do search_value
    isnothing(search_value) && throw(PreventUpdate())
    search_value == "" && throw(PreventUpdate())

    return [o for o in options if occursin(search_value, o.label)]
end

callback!(
    app,
    Output("demo-dropdown-3", "options"),
    Input("demo-dropdown-3", "search_value"),
    State("demo-dropdown-3", "value")
) do search_value, value
    isnothing(search_value) && throw(PreventUpdate())
    search_value == "" && throw(PreventUpdate())


    return [o for o in options if occursin(search_value, o.label) || in(o.value, something(value, []))]
end


run_server(app, "0.0.0.0", debug=true)
Single dynamic Dropdown
Multi dynamic Dropdown

Components as Option Labels

This feature is available in Dash 2.5 and later.

In previous examples, we’ve set option labels as strings. You can also use Dash components as option labels.
In this example, each label is an html.Span component with an html.Img component and some text inside.

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import dcc, html

dcc.Dropdown(
    [
        {
            "label": html.Span(
                [
                    html.Img(src="/assets/images/language_icons/python_50px.svg", height=20),
                    html.Span("Python", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "Python",
        },
        {
            "label": html.Span(
                [
                    html.Img(src="/assets/images/language_icons/julia_50px.svg", height=20),
                    html.Span("Julia", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "Julia",
        },
        {
            "label": html.Span(
                [
                    html.Img(src="/assets/images/language_icons/r-lang_50px.svg", height=20),
                    html.Span("R", style={'font-size': 15, 'padding-left': 10}),
                ], style={'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "R",
        },
    ],
    value="Python"
)

Styling Components as Option Labels

This feature is available in Dash 2.5 and later.

You can also style labels by using an html.Span component for each label and then setting styles using the style property:

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import dcc, html

dcc.Dropdown(
    [
        {
            "label": html.Span(['Montreal'], style={'color': 'Gold', 'font-size': 20}),
            "value": "Montreal",
        },
        {
            "label": html.Span(['NYC'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "value": "NYC",
        },
        {
            "label": html.Span(['London'], style={'color': 'LightGreen', 'font-size': 20}),
            "value": "London",
        },
    ], value='Montreal'
)

Custom Search Values

When you use components as option labels, the dropdown’s search uses the option values by default.
You can add an extra string for the search by setting an option’s search property.
Here we set a search value for each option to match that option’s label text.

The value provided to search is in addition to option value. For example, option 2 is displayed when a user searches
for either ‘NYC’ or ‘New York City’.

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import dcc, html

dcc.Dropdown(
    [
        {
            "label": html.Span(['Montreal'], style={'color': 'Gold', 'font-size': 20}),
            "value": "MTL",
            "search": "Montreal"
        },
        {
            "label": html.Span(['New York City'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "value": "NYC",
            "search": "New York City"
        },
        {
            "label": html.Span(['London'], style={'color': 'LightGreen', 'font-size': 20}),
            "value": "LON",
            "search": "London"
        },
    ], value='Montreal',
)

The height of an expanded dropdown is 200px by default. Options that fit within this height are visible on screen,
while the remaining options can be accessed using the dropdown’s vertical scrollbar.
You can change the height with maxHeight if you want more or fewer options to be visible when the dropdown is expanded.
In this example, we set it to 300px.

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import dcc

dcc.Dropdown(
    ['New York City', 'Montreal', 'Paris', 'London', 'Amsterdam', 'Berlin', 'Rome'],
    'Paris', id='height-example-dropdown', maxHeight=300
)

Option Height

You can change the height of options in the dropdown by setting optionHeight. In this example, we set it to 50px.
The default is 35px.

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import dcc

dcc.Dropdown(
    ['New York City', 'Montreal', 'Paris', 'London', 'Amsterdam', 'Berlin', 'Rome'],
    'Paris', id='option-height-example-dropdown', optionHeight=50
)

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

options (Array of Dicts; optional):
An array of options {label: [string|number], value: [string|number]},
an optional disabled field can be used for each option.

options is an Array of Strings | Reals | Bools | Dict | Array of
Dicts with keys:

  • disabled (Bool; optional):
    If true, this option is disabled and cannot be selected.

  • label (Array of or a singular dash component, String or Real; required):
    The option’s label.

  • search (String; optional):
    Optional search value for the option, to use if the label is a
    component or provide a custom search value different from the
    label. If no search value and the label is a component, the
    value will be used for search.

  • title (String; optional):
    The HTML ‘title’ attribute for the option. Allows for information
    on hover. For more information on this attribute, see
    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.

  • value (String | Real | Bool; required):
    The value of the option. This value corresponds to the items
    specified in the value property.

value (String | Real | Bool | Array of Strings | Reals | Bools; optional):
The value of the input. If multi is false (the default) then value
is just a string that corresponds to the values provided in the
options property. If multi is true, then multiple values can be
selected at once, and value is an array of items with values
corresponding to those in the options prop.

multi (Bool; default false):
If true, the user can select multiple values.

clearable (Bool; default true):
Whether or not the dropdown is “clearable”, that is, whether or not a
small “x” appears on the right of the dropdown that removes the
selected value.

searchable (Bool; default true):
Whether to enable the searching feature or not.

search_value (String; optional):
The value typed in the DropDown for searching.

placeholder (String; optional):
The grey, default text shown when no option is selected.

disabled (Bool; default false):
If true, this dropdown is disabled and the selection cannot be changed.

optionHeight (Real; default 35):
height of each option. Can be increased when label lengths would wrap
around.

maxHeight (Real; default 200):
height of the options dropdown.

style (Dict; optional):
Defines CSS styles which will override styles previously set.

className (String; optional):
className of the dropdown element.

id (String; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

loading_state (Dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a Dict with keys:

  • component_name (String; optional):
    Holds the name of the component that is loading.

  • is_loading (Bool; optional):
    Determines if the component is loading or not.

  • prop_name (String; optional):
    Holds which property is loading.

persistence (Bool | String | Real; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (Array of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.