Component Properties

Many components have a children property that accepts components, strings, numbers, and lists of those. If a component has a children property, then it is the first keyword argument of that component and is often omitted: html.Div(html.Img()) is the same as html.Div(children=html.Img()).

In Dash 2.5 and later, dcc.Dropdown, dcc.Checklist, and dcc.RadioItems also accept components for label within
the options property. In this example, we use an image and some text for each of the checklist option labels:

from dash import dcc, html

dcc.Checklist(
    [
        {
            "label": html.Div(
                [
                    html.Img(src="/assets/images/language_icons/python_50px.svg", height=30),
                    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", height=30),
                    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", height=30),
                    html.Div("R", style={'font-size': 15, 'padding-left': 10}),
                ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "R",
        },
    ]
)

For more examples, see: * Dropdown — Components as Option Labels * Checklist — Components as Option Labels * RadioItems — Components as Option Labels

For Component Developers

To enable component properties within your component, change the PropType to
PropType.node for JavaScript components or JSX.Element for TypeScript components,
and then regenerate the component.

Dash supports limited nesting. The following components are valid:

A single element:

CustomComponent(
    label=html.Div()
)

A list of elements:

CustomComponent(
    labels=[
        html.Div(),
        html.Div(),
        html.Div(),
    ]
)

A dict of elements:

CustomComponent(
    labels={
        'a': html.Div(),
        'b': html.Div(),
        'c': html.Div(),
    }
)

A list of dicts of elements:

CustomComponent(
    labels=[
        {'a': html.Div()},
        {'b': html.Div()},
        {'c': html.Div()},
    }
)

Nesting beyond two levels is not supported. For example, this deep nesting inside a dict isn’t supported:

CustomComponent(
    labels={
         'data': [
               {'col1': html.Div()},
               {'col2': html.Div()},
         ]
     }
)