Add checkbox to a dropdown in plotly dash

Dash Python
1

0

This might be a FAQ, but I did not find any solution for plotly dash . I don’t have any html or css knowledge. I need to add a checkbox next to every option in the dropdown.

I also tried to add my custom class to the css stylesheet -

.checked[type="checkbox"]:before {
  width: 10px;
  height: 10px;
}

But, adding this option in className also does not help. I am not looking for multi=True , as the user will have to re-open the dropdown again to select next option. The file /assets/bWLwgP.css is the usual bWLwgP.css downloadable from “https://codepen.io/chriddyp/pen/bWLwgP.css”

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ["/assets/bWLwgP.css)"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Dropdown(
        id='demo-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC', multi=False, className="checked"
    ),
    html.Div(id='dd-output-container'), 
])


@app.callback(
    dash.dependencies.Output('dd-output-container', 'children'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


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