Hello,
I have created a form in Dash using a few dcc.input fields that take numeric values. I need to limit the number range in these input fields. Ideally, I’d like to show a pop-up message as soon as the user navigates away from the field with an out of range value, and reset the field value to some default value at the same time.
Would much appreciate any pointers.
Thanks!
From a UX perspective, I don’t like popups. I would prefer an in-page error indication. Something like this,
Here is the example code,
from dash import Dash, Output, Input
import dash_mantine_components as dmc
app = Dash()
app.layout = dmc.NumberInput(
min=1, max=5, value=2, id="number"
)
app.clientside_callback("""function(value){
if(value > 5){return "Value exceeds maximum allowed value of 5"}
if(value < 1){return "Value is below minimum allowed value of 1"}
return false;
}""", Output("number", "error"), Input("number", "value"))
app.run_server(port=7779)
If you still prefer the popup, it should be straight forward to change the callback to taget a popup instead 