Search⌘ K
AI Features
Home
Courses
Interactive Dashboards and Data Apps with Plotly and Dash

Understanding the ID Parameter of Dash Components

Explore how to assign unique id parameters to Dash components to identify them clearly. Learn to link these components as inputs and outputs using callback functions in Dash. This lesson enables you to create basic interactivity within your app by connecting frontend elements to backend logic, preparing you to build more complex interactive dashboards.

We'll cover the following...

Let’s now look at how to identify components by setting their id values. After that, we’ll learn how to declare a component as Input or Output.

The id parameter of Dash components

Every Dash component has an id parameter that we can easily set in order to uniquely identify it. There is actually nothing more to this parameter than making sure that our components have unique and descriptive names.

Using descriptive and explicit names for the id parameter becomes more important as the app grows in complexity. This parameter is optional when there is no interactivity, but it becomes mandatory when there is. The following example snippet shows how easy it is to set the id parameter for a basic use case:

Python
html.Div([
   html.Div(id='empty_space'),
   html.H2(id='h2_text'),
   dcc.Slider(id='slider'),
])

Applying this to our current isolated app, we set a descriptive name to each id ...