Forms
Allow users to submit or edit information.
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).
Guidelines
Backlink in page title
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 pageOn form dirty :
Prompt-before-leave
Leave page by other means
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 native
Prompt-before-leave
Error management
Automatically handled by ROMA (Design + Content)
Save while errors in fields
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
Errors in fields
When the user tries to correct a field in error state after an unsuccessful save
Design pattern
onBlurInput in error state changes to default stateonChangeInput 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
Server error
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.
Last updated
