✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Customizing dropdowns

Hello All,

I am new to dash and learning through the documentation. I want to customize every drop-down. Ex:- If drop-down ‘a’ is selected then the child of ‘a’ should have a slider and the child of ‘b’ should have another drop-down. I understand that I have to create html.div within each drop-down but do not know how. Please suggest the way forward. Also the code here (with the help of webbrowser and theading packages) opens the dash web page automatically and no need to open the localhost manually. I hope I contributed something too.

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        value=['a'],
        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c', 'd']],
        multi=False,
        id='dropdown'
    ),
    html.H3(id='output')
])

@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
def display_output(value):
    return str(value)




import webbrowser
from threading import Timer

def open_browser():
      webbrowser.open_new('http://127.0.0.1:8050/') 

if __name__ == '__main__':
    
    Timer(1, open_browser).start();
    app.run_server(port=8050)

Hello @quantpanda123, welcome to the forum!
I can see two solutions for this: use dcc.Tabs instead of a dropdown, so that you can put in each tab the elements you like (see https://dash.plot.ly/dash-core-components/tabs). I think this is the easiest solution.

Or you can also return components as children of a div

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        value=['a'],
        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c', 'd']],
        multi=False,
        id='dropdown'
    ),
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
def display_output(value):
    if value == 'a':
        return dcc.Slider(id='slider')
    else:
        dcc.Dropdown(
            value=['A'],
            options=[{'label': i, 'value': i} for i in ['A', 'B']],
            multi=False,
            id='dropdown2'
        ),


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

If you do this, the problem is that you will not be able to use the returned components in callbacks as they are not defined in the layout – unless you use app.config.suppress_callback_exceptions = True as explained in the FAQ ( Callbacks require their Inputs , States , and Output to be present in the layout).

Hope this helps!