Add line break in dcc.Dropdown option

Dash Python
2

Hi @kilobit

As of Dash 2.5.1 the dcc.Dropdown , dcc.Checklist , and dcc.RadioItems accept components for label

See more examples in the dropdown docs

Here are two ways to format the labels. The first uses html.Pre to preserve the line breaks and white space. The second uses a dcc.Markdown component and Markdown syntax. Note that with Markdown, you need two spaces as the end of a line to force a line break.


from dash import Dash, dcc, html

app = Dash(__name__)

options1 = [
    {"label": html.Pre("1.this is my first option \n choose dog"), "value": "dog"},
    {"label": html.Pre("2.this is my first second \n choose cat"), "value": "cat"},
]


options2 = [
    {"label": dcc.Markdown("1.  this is my first option  \n choose dog"), "value": "dog"},
    {"label": dcc.Markdown("2.  this is my second option  \n choose cat"), "value": "cat"},
]


app.layout = html.Div([
    dcc.Dropdown(options=options1),
    dcc.Dropdown(options=options2),    
])


if __name__ == '__main__':
    app.run_server(debug=True)
3 Likes