Dash Core Components

Dash ships with supercharged components for interactive user interfaces.

This core set of components is available in theDashCoreComponents library.

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.

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])

if __name__ == '__main__':
    app.run(debug=True)

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal', multi=True)
])

if __name__ == '__main__':
    app.run(debug=True)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Slider(-5, 10, 1, value=-3)
])

if __name__ == '__main__':
    app.run(debug=True)

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.RangeSlider(-5, 10, 1, count=1, value=[-3, 7])
])

if __name__ == '__main__':
    app.run(debug=True)

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, html, dcc

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Input(
        placeholder='Enter a value...',
        type='text',
        value=''
    )
])

if __name__ == '__main__':
    app.run(debug=True)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Checklist(['New York City', 'Montréal', 'San Francisco'],
                  ['Montréal', 'San Francisco'])
])

if __name__ == '__main__':
    app.run(debug=True)

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.RadioItems(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])

if __name__ == '__main__':
    app.run(debug=True)

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.RadioItems(
        ['New York City', 'Montréal', 'San Francisco'],
        'Montréal',
        inline=True
    )
])

if __name__ == '__main__':
    app.run(debug=True)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

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)
Enter a value and press submit

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html
from datetime import date

app = Dash(__name__)

app.layout = html.Div([
    dcc.DatePickerSingle(
        id='date-picker-single',
        date=date(1997, 5, 10)
    )
])

if __name__ == '__main__':
    app.run(debug=True)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html
from datetime import date

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

Dash and Markdown

Dash supports Markdown.
Markdown is a simple way to write and format text.
It includes a syntax for things like bold text and italics,
links, inline code snippets, lists,
quotes, and more.

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html

app = Dash(__name__)

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)

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html, Input, Output, State, callback

app = Dash(__name__)

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

**

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html, Input, Output, callback
import time

app = Dash(__name__)

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)

**