Rendering Mathematical Notations in dcc.Dropdown Component

Hello,

I am working on a Dash app using dcc.Dropdown from Dash Core Components, and I need to display mathematical notations or formulas (such as LaTeX or MathJax) within the dropdown options. However, I’ve found that the dropdown component does not support the rendering of LaTeX or MathJax formulas; they are displayed as plain text.

For example, when I try to use ${\Delta}t^*_Н, K$ or similar mathematical expressions, they remain unformatted and appear as regular text. Is there any way to enable rendering of LaTeX or formulas directly inside the dcc.Dropdown options? If not, are there any custom component solutions or workarounds available to achieve this?

I would appreciate any guidance or suggestions on this issue.

Thank you!

Hey @samodurOFF welcome!

You might use a dcc.Markdown() component for your label:

import dash
from dash import dcc, html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        dcc.Dropdown(
            options=[
                {"value": 1, "label": dcc.Markdown('${\Delta}t^*_Н, K$', mathjax=True)}
            ]
        )
    ]
)

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

Thank you. It turned out to be easier than I thought. I knew that dcc.Markdown supports MathJax, but I didn’t think it could be used like this.

1 Like