# Error Management {% hint style="info" %} Behaviors listed on this page are a*utomatically handled by ROMA (Design + Content).* {% endhint %} ## Inform users *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

{% hint style="info" %} Error for empty fields is automatically managed, content can not be changed ("Required Field") {% endhint %} {% hint style="info" %} 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 {% endhint %} ## Users correct errors *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 ## Technical error *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](https://design.mirakl.com/patterns/loading#loading-error). It allows to retry sending form without losing current page and its informations. ## Frequently Asked Questions > 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.

## Key Take Away {% hint style="success" %} **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 {% endhint %} {% hint style="danger" %} **Don't** Custom Error management : it must remain the same to every form {% endhint %} {% hint style="info" %} Learn more about [Error Management guidelines and content](https://design.mirakl.com/design/patterns/errors) through the plateform {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://design.mirakl.com/design/patterns/forms/error-management.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.