`dbc.Checklist` does not accept `label` as `list[Component]` like `dcc.Checklist` does

[stdedos]

Before opening:

• Search for duplicate or closed issues
• Read the contributing guidelines

Please fill out the below information as much as possible.

dash                          2.13.0
dash-bootstrap-components     1.3.1 (still fails with 1.5.0)

What is happening?

A = [
    {
        "label": [
            html.Span(f"{label}: ", style={"fontFamily": "monospace"}),
            html.Span(B[ind]),
        ],
        "value": f"_{label}",
    }
    for ind, label in enumerate(C)
]

Is accepted as a dcc.Checklist, but not as dbc.Checklist.

Wrapping with a html.Div changes the error to a more "React"-one, but still fails

What should be happening?

Code

# your code here

Error messages

paste any error messages here

[tcbegley]

Hi @stdedos

Apologies that it took me a long time to get back to you.

It should be possible to pass components in version 1.4.0 and later. So 1.3.1 will not work, though I see you had problems with 1.5.0 also?

I wasn't exactly sure what the A, B, and C are in your example, but I tried the below and had no problems

import dash_bootstrap_components as dbc
from dash import Dash, html

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

app.layout = dbc.Container(
    [
        dbc.Checklist(
            options=[
                {
                    "label": html.Span(
                        f"Option {i}",
                        style={"color": "red" if i % 2 == 0 else "blue"},
                    ),
                    "value": i,
                }
                for i in range(1, 11)
            ],
        ),
    ],
    className="p-5",
)


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

Could you try this example with dbc>=1.4.0 and let me know if it works for you?

[Nizhurin]

in version dash_bootsrap_component = 1.4.0 and 1.5.0. i get this error

Minified React error #31 In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.

The full text of the error you just encountered is:

Objects are not valid as a React child (found: object with keys {namespace, props, type}). If you meant to render a collection of children, use an array instead.

my code is:

        dbc.Checklist(
            options=[
                {"label": html.Span('Test_label_check_with_icons', style={'class': "bi bi-sun"}), "value": 777}
            ],
            id="checklist-with-icons",
        ),

dash version 2.0.0 may be anyone help me with checklist with icons ?

[AnnMarieW]

Hi @Nizhurin Try upgrading to the latest version of Dash. That feature wasn't available in Dash V2.0.0