How to create a dropdown component using Dash in Python

Dash is a powerful open-source framework that creates interactive dashboards and data applications in Python. Dash removes the complexity that goes into developing data applications enables you to create quality products without having to get familiar with web development.

The core components that comprise the Dash framework are listed below:

  • Flask (back-end server)
  • Plotly (library used to display data visualizations)
  • React (front-end)

Main packages of Dash

It is a common misconception that the Dash framework comprises of a single extensive library. However, on the contrary, it is made up of small packages combined together, each catering to a specific area of app development.

The following are some of the most utilized packages of the Dash framework, and we will use them to create our simple app for this lesson:

  • Dash: This is the main library of the Dash framework that creates/initializes our app and gives it its structure.

  • Dash HTML Components: This package provides all the available HTML tags as Python classes. It simply converts Python to HTML.

  • Dash Core Components: This package contains a list of dynamic components to make applications more interactive for the users. All popularly used components in dash applications, such as Drop-downs, date pickers, sliders, and many more components are included in this package.

The Dropdown component

dcc.Dropdown(options=[],value=,placeholder=,multi=,disabled=)

Some of the key features of the Dropdown component include:

  • options: This parameter sets the options available for selection in the drop-down.
  • value: This parameter sets the default value for the drop-down.
  • multi: Setting this parameter to True allows the user to select multiple values.
  • placeholder: This parameter adds default text to display when no value is selected.
  • disabled: To disable the dropdown we can set this to True.

Implementation

We create a Dropdown component in the following playground using the Dash framework.

import dash
from dash import html
from dash import dcc
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Dash's drop-down component"),
    dcc.Dropdown(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                placeholder="Select month(s)",
                multi=True,
                disabled=False)
])
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8050)
A basic Dash app with a drop-down component

Let’s take a look at the above code in detail:

  • Lines 1–3: We import the required packages from the Dash framework. These packages are the same as those listed above.

  • Line 4: We initialize our application.

  • Lines 5–11: These lines of code create the basic layout for our application. There is only one HTML.Div element in the application. We add an H1 heading for the application inside the Div element. Finally, we create our customized drop-down component that displays the months of the year and allows the user to select multiple values.

  • Lines 12–13: We run the application server to start the application.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved