Dropdown component for Dash that supports clicking on selected items

Question

Dash has a nice Dropdown component that supports multi-value selection. In my application, the user can do data segmentation via multiple dropdown menus to choose properties "A", "B", "C", "D", and "E". It would be useful to also allow the user to segment based on negations of properties, say "not A" and "not E".

Is there already a Dropdown component available that would support clicking on items (i.e., when a user clicks on the selected property "A", we could make the element turn red to denote "not A" is now selected)? For example, suppose the user clicks on "New York City" in the multi-value dropdown example, and the corresponding "box" containing it changes color.

The Dash documentation explains how to create your own component but this doesn't cover the scenario where you simply want to extend an existing component. If there's no such component available, how would I go about making one?

Further background:

• There's a discussion on the plotly forum where a user explains how an existing component can be extended. The major downside with this is that one needs to update and rebuild the whole dash-core-components library every time one makes a change to the component or a new dash version is released.

• There's an issue open on dash-docs for writing a tutorial to cover this case with no apparent progress so far.

Answer 1

There is a way to achieve this in native Dash by effectively making a drop down checklist. This is achieved by using dash_html_components.Details and dash_html_components.Summary. This is native in HTML5.

Sample code:

import datetime
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
server = app.server

app.layout = dbc.Container(
    children=[
        html.Details([
        html.Summary('Select city...'),
        html.Br(),
        dbc.Col([
            dcc.Checklist(
                options=[
                    {'label': 'New York City', 'value': 'NYC'},
                    {'label': 'Montréal', 'value': 'MTL'},
                    {'label': 'San Francisco', 'value': 'SF'}
                    ],
                value=['NYC', 'MTL'],
                labelStyle = {'display': 'block'}
                )  
            ])
        ])
    ])

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