dbc.Select() setting dropdown to required doesn't automatically outline an empty dropdown in DASH

I'm creating a plotly-Dash form and using bootstraps dbc.Select() to create a dropdown. I want it to be outlined with a red border as I have with my dbc.Input() boxes when nothing is selected, but it doesn't appear to be working. What am I doing wrong? I set required = True as I did with my dbc.Input() but no outline:

dbc.Select(, required=True, options=[{'label': 'Heated', 'value': 'Heated'}, {'label': 'Ambient', 'value': 'Ambient'}, {'label': 'N/A', 'value': 'N/A'}], value=temperature[0]
),

1 Answer

Not sure why the required field is not working for dbc.Select, but there is a workaround to getting required working for it.

You could have a callback triggered either by selecting a value for the dropdown or using dcc.Interval and checking if dropdown.value is None. You could also add an empty option into the dropdown and extend the check to dropdown.value is None or dropdown.value == "" in case the user selects it. if the condition is true, then set the required attribute to true and have some css style for :required pseudo class to some color (e.g. #SOME_INPUT:required {border: 1px solid red;}).

Something like the following could be used as a template:

select = dbc.Select(, required=True, options=[ {'label': '', 'value': ''}, {'label': 'Heated', 'value': 'Heated'}, {'label': 'Ambient', 'value': 'Ambient'}, {'label': 'N/A', 'value': 'N/A'}],
)
app.layout = html.Div([select])
@app.callback( Output("dropdown-required", "required"), Input("dropdown-required", "value")
)
def set_dropdown_required(value): res = ( True if value is None or value == "" else False ) return res

and some css styling under assets/style.css:

#dropdown-required:required { border: 1px solid red;
}