dccChecklist

dccChecklist is a component for rendering a set of checkboxes.
See also RadioItems for selecting a single
option at a time or Dropdown for a more compact view.

Examples

Find a few usage examples below.

Basic Checklist

To create a basic checklist, provide options and a value to dccChecklist in that order.

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 dcc

dcc.Checklist(
    ['New York City', 'Montréal', 'San Francisco'],
    ['New York City', 'Montréal']
)

Horizontal Options

Option labels render vertically in the browser by default. You can also set them to display horizontally:

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 dcc

dcc.Checklist(
    ['New York City', 'Montréal', 'San Francisco'],
    ['New York City', 'Montréal'],
    inline=True
)

Components as Option Labels

This feature is available in Dash 2.5 and later.

In previous examples, we’ve set option labels as strings. You can also use Dash components as option labels.
In this example, each label is a list of components containing an html.Img and text in an html.Span.

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 dcc, html

dcc.Checklist(
    [
        {
            "label": [
                html.Img(src="/assets/images/language_icons/python_50px.svg"),
                html.Span("Python", style={"font-size": 15, "padding-left": 10}),
            ],
            "value": "Python",
        },
        {
            "label": [
                html.Img(src="/assets/images/language_icons/julia_50px.svg"),
                html.Span("Julia", style={"font-size": 15, "padding-left": 10}),
            ],
            "value": "Julia",
        },
        {
            "label": [
                html.Img(src="/assets/images/language_icons/r-lang_50px.svg"),
                html.Span("R", style={"font-size": 15, "padding-left": 10}),
            ],
            "value": "R",
        },
    ],
    labelStyle={"display": "flex", "align-items": "center"},
)

Styling Components as Option Labels

This feature is available in Dash 2.5 and later.

You can also style labels by using an html.Div component for each label and then setting styles using the style property:

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 dcc, html

dcc.Checklist(
    [
        {
            "label": html.Div(['Montreal'], style={'color': 'Gold', 'font-size': 20}),
            "value": "Montreal",
        },
        {
            "label": html.Div(['NYC'], style={'color': 'MediumTurqoise', 'font-size': 20}),
            "value": "NYC",
        },
        {
            "label": html.Div(['London'], style={'color': 'LightGreen', 'font-size': 20}),
            "value": "London",
        },
    ], value=['Montreal'],
    labelStyle={"display": "flex", "align-items": "center"},
)

Checklist Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

options (list where each item is a named list; optional):
An array of options.

options is an unnamed list of characters | numerics | logicals |
named list | list where each item is a named list with keys:

disabled (logical; optional):
If TRUE, this option is disabled and cannot be selected.
label (unnamed list of or a singular dash component, character or numeric; required):
The option’s label.
title (character; optional):
The HTML ‘title’ attribute for the option. Allows for information
on hover. For more information on this attribute, see
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.
value (character | numeric | logical; required):
The value of the option. This value corresponds to the items
specified in the value property.

value (unnamed list of characters | numerics | logicals; optional):
The currently selected value.

inline (logical; default FALSE):
Indicates whether the options labels should be displayed inline
(TRUE=horizontal) or in a block (FALSE=vertical).

className (character; optional):
The class of the container (div).

style (named list; optional):
The style of the container (div).

inputStyle (named list; optional):
The style of the <input> checkbox element.

inputClassName (character; default ''):
The class of the <input> checkbox element.

labelStyle (named list; optional):
The style of the <label> that wraps the checkbox input and the
option’s label.

labelClassName (character; default ''):
The class of the <label> that wraps the checkbox input and the
option’s label.

id (character; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

loading_state (named list; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a named list with keys:

component_name (character; optional):
Holds the name of the component that is loading.
is_loading (logical; optional):
Determines if the component is loading or not.
prop_name (character; optional):
Holds which property is loading.

persistence (logical | character | numeric; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (unnamed list of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.