onChange Event in DASH Python

Dash Python
1

I want some dcc. Input boxes to be hidden until some specific option is chosen from the dropdown menu. How to achieve this?
Thank you

2

Hi @SaadKhan , welcome to the forum.

You could put the dcc.Input() in a html.Div() and use the hidden property. Here is a example using two buttons:

import dash
from dash import html, Input, Output, dcc, callback_context

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(
            id='container',
            children=[dcc.Input(id='inp', placeholder='Text')],
            hidden=True
        ),
        html.Button('Show', id='show', n_clicks=0),
        html.Button('Hide', id='hide', n_clicks=0),
    ]
)


@app.callback(
    Output('container', 'hidden'),
    [
        Input('show', 'n_clicks'),
        Input('hide', 'n_clicks'),
    ],
    prevent_initial_call=True
)
def update_output(show, hide):
    trigger = callback_context.triggered_id
    if trigger == 'show':
        return False
    else:
        return True


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

You could also use the style property of the dcc.Input():

@app.callback(
    Output('inp', 'style'),
    [
        Input('show', 'n_clicks'),
        Input('hide', 'n_clicks'),
    ],
    prevent_initial_call=True
)
def update_output(show, hide):
    trigger = callback_context.triggered_id
    if trigger == 'show':
        return {}
    else:
        return {'visibility': 'hidden'}
2 Likes
3

Thank you so much and again Thank you, it wokred and i connected it with the option form dropdown selection.

Thank you man

4

can I follow you on LinkedIn?