Forms
Allow users to submit or edit information.
Last updated
Allow users to submit or edit information.
Last updated
This page describes all design and content rules for forms in Roma. Some behaviors will remain the same, regardless of the form type (creation or edition), but for some other behaviors, specific rules apply depending on the form type.
Go to the dedicated section for more information regarding form components (e.g. fields, pickers).
When the user leaves the page using the backlink within the page title.
Automatically handled by ROMA (Design + Content)
The link must always have the following structure:
Back to [landing page title]
Back to Operator account users
The [landing page title] is the exact title of the page you will land on when clicking the link.
On form pristine: No Prompt-before-leave + Back to the previous page
On form dirty : Prompt-before-leave
When the user leaves the page using the back button of the browser, clicks on a link in the sidebar menu or closes the tab.
On Form dirty: browser nativePrompt-before-leave
Automatically handled by ROMA (Design + Content)
When the form cannot be saved due to wrong inputs from the user.
Design pattern
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
A field can only have one help text. Thus, when an error occurs on a field with helptext, the error state takes over it.
Content pattern
Count of errors + list of fields in errors
When the user tries to correct a field in error state after an unsuccessful save
Design pattern
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
Never use "as-you-type" error management
When a technical error occurs while the user tries to save the form.
Design pattern
Snackbar
The form stays in creation mode
Content pattern
An error occurred on our end. Try refreshing the page.
Error helptext takes over the default helptext
Don't stack several helptext under a field
