Multiple Inputs and Outputs to Callbacks

Overview

Is there a way to let multiple inputs adjust a single output or multiple inputs adjust multiple outputs? Yes! See how we can make this possible in this lesson.

By incorporating multiple inputs and outputs, we can build complex applications that respond to user interactions and provide a more engaging experience. This approach is particularly useful in situations where we need to combine data from different sources, update visualizations based on user inputs, or control multiple Dash Components simultaneously.

More than just one input or output

When allowing for more than one input or output inside the @app.callback() decorator, we can simply stack all of our outputs, followed by all of our inputs.

@app.callback(
    Output(...),
    Output(...),
    Output(...),
    Input(...),
    Input(...),
    Input(...),
)

When we specify what we wish to return inside the function, it must be in the order we specified in all of the Output() objects (top to bottom). Similarly, the inputs must be passed into the function parameters from left to right since the inputs were passed into the @app.callback decorator from top to bottom. We will see this in more detail in the following examples.

Multiple date inputs

A common aspect of data is not just the date of a particular event, but filtering for between dates. We may want to look for sales between two dates or find staff who were hired ...