# Dash Core Components

Dash ships with supercharged components for interactive user interfaces.

This core set of components is available in the`DashCoreComponents` 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")

### Dropdown

    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-1 0 1 2 3 4 5 6 7 8 9 10

    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)

Label0 Label1 Label2 Label3 Label4 Label5 Label6 Label7 Label8 Label9

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-1 0 1 2 3 4 5 6 7 8 9 10

    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-5 Label-4 Label-3 Label-2 Label-1 Label0 Label1 Label2 Label3 Label4 Label5 Label6

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)

This is a TextArea component

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)

New York City Montréal San Francisco

    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)

New York City Montréal San Francisco

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)

New York City Montréal San Francisco

    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)

New York City Montréal San Francisco

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. 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)

NYC MTL SF
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)

Montreal New York London
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