invalide checklist options using html.Div labels as documented

[kyng-codeops]

Hello, I am able to load a list of options=[{label: string, value: int}, ..], however loading html.Div objects as documented results in the page not loading with error message "Invalid argument options passed into Checklist."

I did a copy/past from documented example with very few modifications like loading the dcc object as a scalar and commenting out the html images. In my production code, I pass a list comprehension generated list of dictionaries just so I can pad the label text with nothing fancy, and it also fails with the same error message.

Here is the code from the dash docs that produces the same error:

import dash
from dash import Dash, dcc, html, Input, Output, State, dash_table, callback
import dash_bootstrap_components as dbc

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

layout = html.Div(ck)

app = Dash(title='checklist sanity check', external_stylesheets=[dbc.themes.SANDSTONE])
server = app.server
app.layout = layout

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

Here is my environment:

$ python --version
Python 3.9.7
$ pip freeze | grep dash
dash==2.3.1
dash-auth==1.4.1
dash-bootstrap-components==1.1.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
jupyter-dash==0.4.2

[alexcjohnson]

This feature was added in Dash v 2.5, as mentioned here - should work if you update to the latest version.

[kyng-codeops]

This feature was added in Dash v 2.5, as mentioned here - should work if you update to the latest version.

Thanks! Good catch. I upgraded Dash to v2.5.1 and the error no longer occurs. However the check boxes will not render in-line with the html objects. I have tried setting inline=True as well as inline=False, and regardless of the setting, the html labels always render below their respective checkboxes.

Updated environment:

$ pip freeze | grep -i dash
dash==2.5.1
dash-auth==1.4.1
dash-bootstrap-components==1.1.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
jupyter-dash==0.4.2

Since the "invalide checklist options" error is resolved, I'll close this issue. I've also decided to use the dash_bootstrap_components checklist since it natively renders text labels with padding without the need to encapsulate in additional html containers.

[alexcjohnson]

Interesting - we'll take a look, may need to adjust the CSS to give the desired effect when embedding components.