Drop down with Checkboxes:

Dash Python
1

Hi all, I am trying to create a drop down with html.Div and in that I need to select for multiple values using the checkbox for each of the value and connect it to update section. Please provide a simple example for me so that I can go through.Here is the sample output of the image:
image

2 Likes
2

I’m not aware of existing components that can achieve exactly this, but you can get pretty close with the Dropdown component in dash-core-components. Just set multi=True. See here for the documentation.

3

Hi Bhanu… Were you able to find a way to achieve Dropdown with checkboxes? I am also looking for similar feature.

Regards
Rasool

1 Like
4

Not with the same UI but you could achive the same functionality (selecting multiple values in a dropdown) by setting the multi property of dcc.Dropdown to True. See Multi-value dropdown

5

I have found that the multi option works, but for my app, I would rather have the check boxes because all of the items that I want to select do not fit in the box! So it’s hard to tell what has and has not been selected… :frowning:

6

Hi,

You can use a dcc.Checklist inside a dbc.DropdownMenu, like this:

html.Div(
    children=dbc.DropdownMenu(
        children=[
            dcc.Checklist(
                options=[],
                value=[],
            ),
        ],
        label="menu",
    ),
)

It’s not a perfect solution but it works.

Documentation:
dbc.DropdownMenu
dcc.Checklist

2 Likes
7

Do you know how to adjust the width and height for dbc.DropdownMenu component?
do we have something like a style to control the height and width similar to dcc.dropdown?