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.

    using Pkg
    Pkg.status("Dash")
using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
    )
end

run_server(app, "0.0.0.0", debug=true)
Montréal
×
using Dash

app = dash()

app.layout = dcc_dropdown(
    options=[
        Dict("label" =>  "New York City", "value" =>  "NYC"),
        Dict("label" =>  "Montréal", "value" =>  "MTL"),
        Dict("label" =>  "San Francisco", "value" =>  "SF")
    ],
    multi=true,
    value="MTL"
)

run_server(app, "0.0.0.0", debug=true)
Montréal 
×

More Dropdown Examples and Reference

Slider

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

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

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)
-5-4-3-2-1012345678910
using Dash

app = dash()

app.layout = html_div() do
    dcc_slider(
        min=1,
        max=10,
        step=nothing,
        value=1,
        marks=Dict([i => ("Label$(i)") for i = 1:10]),
    )
end

run_server(app, "0.0.0.0", debug=true)
Label0Label1Label2Label3Label4Label5Label6Label7Label8Label9

More Slider Examples and Reference

RangeSlider

using Dash

app = dash()

app.layout = html_div() do
    dcc_rangeslider(
        count=1,
        min=-5,
        max=10,
        step=0.5,
        value=[-3, 7]
    )
end

run_server(app, "0.0.0.0", debug=true)
-5-4-3-2-1012345678910
using Dash

app = dash()

app.layout = html_div() do
    dcc_rangeslider(
        count=1,
        min=-5,
        max=6,
        step=0.5,
        value=[-3, 4],
        marks=Dict([i => ("Label$(i)") for i = -5:7]),
    )
end

run_server(app, "0.0.0.0", debug=true)
Label-5Label-4Label-3Label-2Label-1Label0Label1Label2Label3Label4Label5Label6

More RangeSlider Examples and Reference

Input

using Dash

app = dash()

app.layout = html_div() do
    dcc_input(
        placeholder="Enter a value...",
        type="text",
        value=""
    )
end

run_server(app, "0.0.0.0", debug=true)
app.layout = dcc_input(
  placeholder = "Enter a value...",
  type = "text",
  value = "",
)

run_server(app, "0.0.0.0", debug=true)

More Input Examples and Reference

Textarea

using Dash

app = dash()

app.layout = html_div() do
    dcc_textarea(
        placeholder="Enter a value...",
        value="This is a TextArea component",
        style=Dict("width" => "100%")
    )
end

run_server(app, "0.0.0.0", debug=true)
app.layout = dcc_textarea(
  placeholder = "Enter a value...",
  value="This is a TextArea component",
  style=Dict("width" => "100%")
)

run_server(app, "0.0.0.0", debug=true)

Textarea Reference

Checkboxes

using Dash

app = dash()

app.layout =  dcc_checklist(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value=["MTL", "SF"]
)

run_server(app, "0.0.0.0", debug=true)
using Dash

app = dash()

app.layout = dcc_checklist(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value=["MTL", "SF"],
  labelStyle=Dict("display" => "inline-block")
)

run_server(app, "0.0.0.0", debug=true)

Checklist Properties

Radio Items

using Dash

app = dash()

app.layout = dcc_radioitems(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value="MTL"
)

run_server(app, "0.0.0.0", debug=true)
using Dash

app = dash()

app.layout = dcc_radioitems(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value="MTL",
  labelStyle=Dict("display" => "inline-block")
)

run_server(app, "0.0.0.0", debug=true)

Radio Items Reference

Button

There actually is no Button component in DashCoreComponents. The regular DashHtmlComponents.html_button component does the job quite well, but we've included it here because this is the one plain html component that's commonly used as a callback input:

using Dash

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div() do
  html_div(dcc_input(id ="input-box", type="text")),
  html_button("Submit", id="button"),
  html_div(id="output-container-button", children="Enter a value and press submit")
end

callback!(
  app, 
  Output("output-container-button", "children"), 
  Input("button", "n_clicks"), State("input-box", "value")) do n_clicks, value
    return "The input value was $(value) and the button has been clicked $n_clicks times"
end

run_server(app, "0.0.0.0", debug=true)
The input value was "None" and the button has been clicked None times

html.Button Reference For more on Dash.State, see basic callbacks.

Sign up for Dash Club → Two free cheat sheets plus updates from Chris Parmer and Adam Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and deep dives into the Dash architecture. Join now.

DatePickerSingle

using Dash
using Dates
app = dash()

app.layout = dcc_datepickersingle(
    id="date-picker-single",
    date=DateTime(1997, 5, 10)
)
run_server(app, "0.0.0.0", debug=true)

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

More DatePickerSingle Examples and Reference

DatePickerRange

using Dash
using Dates
app = dash()

app.layout = dcc_datepickerrange(
  id="date-picker-range",
  start_date=DateTime(1997, 5, 3),
  end_date_placeholder_text="Select a date!"
)
run_server(app, "0.0.0.0", debug=true)

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

More DatePickerRange Examples and Reference

Markdown

using Dash

app = dash()

app.layout = 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.
""")

run_server(app, "0.0.0.0", 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.

More Markdown Examples and Reference

Upload Component

The dcc_upload component allows users to upload files into your app through drag-and-drop or the system's native file explorer. Upload More Upload Examples and Reference

Download Component

The dcc_download component allows users to download files from your app through their browser.

using Dash

app = dash(prevent_initial_callbacks=true)

app.layout = html_div(
    [
      html_button("Download Text", id="btn_txt"), 
      dcc_download(id="download-text-index")
    ]
)

callback!(
  app, Output("download-text-index", "data"), 
  Input("btn_txt", "n_clicks")) do n_clicks
    if n_clicks isa Nothing
      throw(PreventUpdate())
    else
      return (content = "Hello world!", filename="hello.txt")
    end
end

run_server(app, "0.0.0.0", debug=true)

More Download Examples and Reference

Tabs

The Tabs and Tab components can be used to create tabbed sections in your app.

using Dash
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(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!(
  app, Output("tabs-content", "children"), 
  Input("tabs", "value")) do tab
    if tab == "tab-1"
      return html_div([
        html_h3("Tab content 1")
      ])
    else
      return html_div([
        html_h3("Tab content 2")
      ])
    end
end

run_server(app, "0.0.0.0", debug=true)
Tab one
Tab two

Tab content 1

More Tabs Examples and Reference

Graphs

The dcc_graph component shares the same syntax as the open-source plotly.py library. View the plotly.py docs to learn more.

using Dash, PlotlyJS, DataFrames

df_wide = DataFrame(
    year=1995:2012,
    world=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263, 350, 430, 474, 526, 488, 537, 500, 439],
    china=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270, 299, 340, 403, 549, 499],
)

df = DataFrames.stack(df_wide, Not(:year), variable_name=:country, value_name=:y)
fig = plot(
    df, x=:year, y=:y, color=:country,
    Layout(
        title_text="US Export of Plastic Scrap",
        legend=attr(x=0, y=1)
    )
)

app = dash()
app.layout = dcc_graph(figure=fig, style=Dict("height"=>300), id="my-graph")
run_server(app, "0.0.0.0", debug=true)

More Graphs Examples and Reference

View the plotly.py docs.

ConfirmDialogProvider

The dcc_confirmdialogprovider component sends a dcc_confirmdialog when a user clicks the children of the component. In the following example, an html_button is provided as children to dcc_confirmdialogprovider and when the button is clicked, the dialog is displayed.

using Dash

app = dash()
app.layout = dcc_confirmdialogprovider(
    children=html_button(
      "Click Me",
    ),
    id="confirm",
    message="Danger danger! Are you sure you want to continue?"
)
run_server(app, "0.0.0.0", debug=true)

More ConfirmDialogProvider Examples and Reference

Store

The store component can be used to keep data in the visitor's browser. The data is scoped to the user accessing the page.

Three types of storage (storage_type prop):

  • memory: default, keep the data as long the page is not refreshed.
  • local: keep the data until it is manually cleared.
  • session: keep the data until the browser/tab closes.

For local/session, the data is serialized as json when stored.

In this example, one callback saves the value of the selected radio button to a memory store. When the value in the store changes, the second callback outputs the new value and the modified timestamp to a html.Div component.

using Dash
app = dash()
app.layout = dcc_store(id="my-store", data=Dict("my-data" => "data"))
run_server(app, "0.0.0.0", debug=true)
The store currently contains NYC and the modified timestamp is 1745947495483

The store must be used with callbacks

More Store Examples and Reference

Loading Component

The Loading component can be used to wrap components that you want to display a spinner for, if they take too long to load.

This example shows a spinner each time a user selects a radio button as the callback takes 2 seconds to update the html.Div component (id=loading-demo) inside the dcc.Loading component.

using Dash
app = dash()
app.layout = dcc_loading([
    # ...
])
run_server(app, "0.0.0.0", debug=true)
You selected London

More Loading Component Examples and Reference

Location

The location component represents the location bar in your web browser. Through its href, pathname, search and hash properties you can access different portions of your app's url. For example, given the url http://127.0.0.1:8050/page-2?a=test#quiz:

  • href = "http://127.0.0.1:8050/page-2?a=test#quiz"
  • pathname = "/page-2"
  • search = "?a=test"
  • hash = "#quiz"
dcc_location(id="url", refresh=false)

More Location Examples and Reference