0

I'm new to mantine components for Dash in Python, and I'm trying to use the Select component to show different options with an icon in the left, as I previously did with the component Dropdown of dash components.

I have decided to use the Select component of dash-mantine in order to separate the select options by categories, the only problem is that, when I try to set the option's label to an Image component, it returns an error.

This is the code I've created. As it is shown, the label instead of only being a string, is a Div component that includes the image I want to show side by side the value of the option.

                     dmc.Select(
                        label="Select framework",
                        placeholder="Select one",
                        id="framework-select",
                        value="ng",
                        data=[
                            {
                                "value": "react",
                                "label": html.Div(
                                    [
                                        html.Img(
                                            src="assets/tasks-list/Penguin.png",
                                            height=20,
                                        ),
                                    ]
                                ),
                            },
                            {
                                "value": "svelte",
                                "label": html.Div(
                                    [
                                        html.Img(
                                            src="assets/tasks-list/Penguin.png",
                                            height=20,
                                        ),
                                    ]
                                ),
                            },
                        ],
                        style={"width": 200, "marginBottom": 10},
                    ),
                    dmc.Text(id="selected-value"),

Although, if you add as a label key an image, the inspector console throws an error.

My question here is: is it possible to have an image side by side with the text value on the select component options?

For more information about the problem I've created an issue in the source code of Dash Mantine Components here

Thanks in advance for any response

0 Answers0