Both input and output?


Is it possible to have an object be the input of one callback and the output of another?

I’m trying to have two dcc.Inputs that change each other’s values if the other is updated. as soon as I add the 2nd callback, I get “Error loading dependencies”.


Yes it is - see the example of the “multiple outputs” in the user guide here:

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

all_options = {
    'America': ['New York City', 'San Francisco', 'Cincinnati'],
    'Canada': [u'Montréal', 'Toronto', 'Ottawa']
app.layout = html.Div([
        options=[{'label': k, 'value': k} for k in all_options.keys()],





    dash.dependencies.Output('cities-dropdown', 'options'),
    [dash.dependencies.Input('countries-dropdown', 'value')])
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

    dash.dependencies.Output('cities-dropdown', 'value'),
    [dash.dependencies.Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

    dash.dependencies.Output('display-selected-values', 'children'),
    [dash.dependencies.Input('countries-dropdown', 'value'),
     dash.dependencies.Input('cities-dropdown', 'value')])
def set_display_children(selected_country, selected_city):
    return u'{} is a city in {}'.format(
        selected_city, selected_country,

if __name__ == '__main__':


i can’t get this simple example to work:

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

app = dash.Dash()

app.layout = html.Div([ 		html.Div('A = B * 2'),
								dcc.Input(id='a', value='0', type="number"),
								dcc.Input(id='b', value='0', type="number"),	

#update a with b
@app.callback(Output(component_id='a', component_property='value'),[Input(component_id='b', component_property='value')])

def setA(b):
	return float(b) * 2

# update b with a
@app.callback(Output(component_id='b', component_property='value'),[Input(component_id='a', component_property='value')])

def setB(a):
	return float(a) / 2

if __name__ == '__main__':

I keep getting “Error loading dependencies”. @chriddyp - what am i missing?


So in this case, it looks like this would set up an infinite loop. The error message isn’t useful, but this type of structure isn’t possible.

You can have A -> B -> C but you can’t have A -> B -> C -> A yet.


Hey @chriddyp,

I’m trying to perform A -> B -> C -> A logic as I need to initiate a process by showing a Div, and then close this Div when the process is finished. Any idea how to do this?



@jyhsu - This isn’t possible yet and it will require quite a bit of work.

If you are using this just to display messages for process start and process completion, I recommend checking out 📣 Dash Loading States for an interim solution.

If any company out there needs this work expedited, please reach out: