Dash Core Components
Dash ships with supercharged components for interactive user interfaces.
The Dash Core Components module (dash.dcc) gives you access to many interactive components, including dropdowns, checklists, and sliders.
Import dash.dcc with:
from dash import dcc
The dcc module is part of Dash and you’ll find the source for it in the Dash GitHub repo.
Tip: In production Dash apps, we recommend using Dash Enterprise Design Kit to manage the styling and layout of Dash Core Components.
from dash import Dash, html, dcc
app = Dash()
app.layout = html.Div([
dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal', multi=True)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Slider(-5, 10, 1, value=-3)
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Slider(0, 9, marks={i: f'Label{i}' for i in range(10)}, value=5)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.RangeSlider(-5, 10, 1, count=1, value=[-3, 7])
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, html, dcc
app = Dash()
app.layout = html.Div([
dcc.RangeSlider(-5, 6,
marks={i: f'Label{i}' for i in range(-5, 7)},
value=[-3, 4]
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Input(
placeholder='Enter a value...',
type='text',
value=''
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Textarea(
placeholder='Enter a value...',
value='This is a TextArea component',
style={'width': '100%'}
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Checklist(['New York City', 'Montréal', 'San Francisco'],
['Montréal', 'San Francisco'])
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Checklist(
['New York City', 'Montréal', 'San Francisco'],
['Montréal', 'San Francisco'],
inline=True
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.RadioItems(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.RadioItems(
['New York City', 'Montréal', 'San Francisco'],
'Montréal',
inline=True
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, html, dcc, callback, Input, Output, State, callback
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(dcc.Input(id='input-box', type='text')),
html.Button('Submit', id='button-example-1'),
html.Div(id='output-container-button',
children='Enter a value and press submit')
])
@callback(
Output('output-container-button', 'children'),
Input('button-example-1', 'n_clicks'),
State('input-box', 'value'))
def update_output(n_clicks, value):
return 'The input value was "{}" and the button has been clicked {} times'.format(
value,
n_clicks
)
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
from datetime import date
app = Dash()
app.layout = html.Div([
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997, 5, 10)
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
from datetime import date
app = Dash()
app.layout = html.Div([
dcc.DatePickerRange(
id='date-picker-range',
start_date=date(1997, 5, 3),
end_date_placeholder_text='Select a date!'
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Markdown('''
#### Dash and Markdown
Dash supports [Markdown](http://commonmark.org/help).
Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](http://commonmark.org/help), inline `code` snippets, lists,
quotes, and more.
''')
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html, Input, Output, callback
from dash.exceptions import PreventUpdate
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div(
[html.Button("Download Text", id="btn_txt"), dcc.Download(id="download-text-index")]
)
@callback(Output("download-text-index", "data"), Input("btn_txt", "n_clicks"))
def func(n_clicks):
if n_clicks is None:
raise PreventUpdate
else:
return dict(content="Hello world!", filename="hello.txt")
if __name__ == "__main__":
app.run(debug=True)
**
from dash import Dash, dcc, html, Input, Output, callback
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Tabs(id="tabs", value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-content')
])
@callback(Output('tabs-content', 'children'),
Input('tabs', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.Graph(
figure=dict(
data=[
dict(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
350, 430, 474, 526, 488, 537, 500, 439],
name='Rest of world',
marker=dict(
color='rgb(55, 83, 109)'
)
),
dict(
x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
299, 340, 403, 549, 499],
name='China',
marker=dict(
color='rgb(26, 118, 255)'
)
)
],
layout=dict(
title='US Export of Plastic Scrap',
showlegend=True,
legend=dict(
x=0,
y=1.0
),
margin=dict(l=40, r=0, t=40, b=30)
)
),
style={'height': 300},
id='my-graph-example'
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
dcc.ConfirmDialogProvider(
children=html.Button(
'Click Me',
),
id='danger-danger',
message='Danger danger! Are you sure you want to continue?'
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dash, dcc, html, Input, Output, State, callback
app = Dash()
app.layout = html.Div([
dcc.Store(id='my-store'),
dcc.RadioItems(['NYC', 'MTL', 'SF'], 'NYC', id='my-store-input'),
html.Div(id='current-store')
])
@callback(
Output('my-store', 'data'),
Input('my-store-input', 'value')
)
def update_store(value):
return value
@callback(
Output('current-store', 'children'),
Input('my-store', 'modified_timestamp'),
State('my-store', 'data')
)
def display_store_info(timestamp, data):
return f"The store currently contains {data} and the modified timestamp is {timestamp}"
if __name__ == '__main__':
app.run(debug=True)
The store must be used with callbacks
**
from dash import Dash, dcc, html, Input, Output, callback
import time
app = Dash()
app.layout = html.Div(
[
dcc.RadioItems(
["Montreal", "New York", "London"], "London", id="loading-demo-dropdown"
),
dcc.Loading([html.Div(id="loading-demo")]),
]
)
@callback(Output("loading-demo", "children"), Input("loading-demo-dropdown", "value"))
def update_loading_div(value):
time.sleep(2)
return f"You selected {value}"
if __name__ == "__main__":
app.run(debug=True)
**