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 componentsincluding dropdownschecklistsand 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 appswe recommend using Dash Enterprise Design Kit to manage the styling and layout of Dash Core Components.
from dash import Dashhtmldcc
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 Dashdcchtml
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 Dashdcchtml
app = Dash()
app.layout = html.Div([
dcc.Slider(-5101value=-3)
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dashdcchtml
app = Dash()
app.layout = html.Div([
dcc.Slider(09marks={i: f'Label{i}' for i in range(10)}value=5)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
app = Dash()
app.layout = html.Div([
dcc.RangeSlider(-5101count=1value=[-37])
])
if __name__ == '__main__':
app.run(debug=True)
from dash import Dashhtmldcc
app = Dash()
app.layout = html.Div([
dcc.RangeSlider(-56,
marks={i: f'Label{i}' for i in range(-57)},
value=[-34]
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
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 Dashdcchtml
app = Dash()
app.layout = html.Div([
dcc.Textarea(
placeholder='Enter a value...',
value='This is a TextArea component',
={'width': '100%'}
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
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 Dashdcchtml
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 Dashdcchtml
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 Dashdcchtml
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 DashhtmldcccallbackInputOutputState
app = Dash()
app.layout = html.Div([
dcc.Input(id='input-box'type='text'),
dcc.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_clicksvalue):
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 Dashdcchtml
from datetime import date
app = Dash()
app.layout = html.Div([
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997510)
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
from datetime import date
app = Dash()
app.layout = html.Div([
dcc.DatePickerRange(
id='date-picker-range',
start_date=date(199753),
end_date_placeholder_text='Select a date!'
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
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` snippetslists,
quotesand more.
''')
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import DashdcchtmlInputOutputcallback
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 DashdcchtmlInputOutputcallback
external_sheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__external_sheets=external_sheets)
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 Dashdcchtml
app = Dash()
app.layout = html.Div([
dcc.Graph(
figure=dict(
data=[
dict(
x=[199519961997199819992000200120022003,
200420052006200720082009201020112012],
y=[219146112127124180236207236263,
350430474526488537500439],
name='Rest of world',
marker=dict(
color='rgb(5583109)'
)
),
dict(
x=[199519961997199819992000200120022003,
200420052006200720082009201020112012],
y=[16131011283743555688105156270,
299340403549499],
name='China',
marker=dict(
color='rgb(26118255)'
)
)
],
layout=dict(
title='US Export of Plastic Scrap',
showlegend=True,
legend=dict(
x=0,
y=1.0
),
margin=dict(l=40r=0t=40b=30)
)
),
={'height': 300},
id='my-graph-example'
)
])
if __name__ == '__main__':
app.run(debug=True)
**
from dash import Dashdcchtml
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 DashdcchtmlInputOutputStatecallback
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(timestampdata):
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 DashdcchtmlInputOutputcallback
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)
**