Error Management
How we guide users to handle mistakes on their forms
Last updated
Was this helpful?
How we guide users to handle mistakes on their forms
Last updated
Was this helpful?
Behaviors listed on this page are automatically handled by ROMA (Design + Content).
When the form cannot be saved due to wrong inputs from the user.
Alert Error (red) with number of errors + list of inputs in errors (in the form order) + anchor to each input
The form stays in creation mode
Error for empty fields is automatically managed, content can not be changed ("Required Field")
For Forms using "Save as draft", it is only possible to save valid values, even just as draft. Otherwise, for unvalid values, error management remains the same
When the user tries to correct a field in error state after an unsuccessful save
onBlur Input in error state changes to default state
onChange Input stays in default state unless there is a "front error" (invalid characters; ...). Then, the input changes back to error state
When a technical error occurs while the user tries to save the form.
Snackbar with following content : [An error occurred on our end. Try refreshing the page.]
The form stays in creation mode
Forms are one of the few cases where a snackbar informs users of a technical error, not a empty state. It allows to retry sending form without losing current page and its informations.
If my field already has a helptext but is in error when users tries to save the form : what should I do ?
A field can only have one helptext. Thus, when an error occurs on a field that already had a helptext, the error state takes over it.
Can we notify users they made a mistake before they even try to save the form
We don't allow "as-you-type" error management. Always let users validate their form before notify errors. It will let them correct themselves before even trying to send form.
How do we manage Error Management with a confirmation modale to a form ?
Sometimes we add a confirmation modale to a form. It helps users to be more cautious about sensitive actions.
In this case, Error Management (back and front errors) are both launched when user clicks on Primary Button of the modale.
Do
Inform and guide users. They should be able to understand by themselves how to correct their form.
Use field component on their Error Variant
Add an anchor to each imput for users to access directly from the alert
Don't
Custom Error management : it must remain the same to every form
Learn more about Error Management guidelines and content through the plateform
