Form - In a modal

Overview

For forms, the main guideline is to display it in a dedicated page. But in few cases it may be complex to create a new page for a form. Thus, to ease the experience, in those cases you may create a form in a modal :

  • When there are not many fields (3 to 5 fields)

  • When forms are embedded (a form in an another form)

  • When creating an object in a form (create a rule, add a parameter (...) in a form)

Form in a modale

Guidelines

Save Bar

  • Visibility: The Save Bar is always shown in a form in modal

  • Functionality: Both 'Save' and 'Cancel' buttons are enabled

Behaviors

Limitations

A modal should not trigger another modal. You may be obliged to do so, but be aware of possible poorer experience. You should test your mock-up in those cases to be sure users are able to navigate through the form.

Thus, those inputs may be complex to use in a form within a modal:

  • DateRange Picker

  • Date Time Picker

There is one component that can never be used in a form within a modal :

  • Advanced Picker

However, a modal can trigger overlays such as Dropdowns, Tooltips, etc.

Create an object in a form through a modal

When a form involves creating an object, it’s important to determine whether the object should be created within the form itself or through a modal.

  1. Simple Objects:

    • If the object is simple and requires only a few fields, use a specific panel or a card within the form.

    • This approach is less intrusive and allows users to quickly input necessary information without navigating away from the form.

  2. Complex Objects:

    • When the object involves dynamic blocks with more than one field, it is better to use a modal.

    • Modals provide more flexibility and space to handle complex data inputs.

  3. Benefits of Using Modals:

    • Separation of Concerns: Modals allow for a clear distinction between the main form and the sub-form used for creating the object.

    • Error Management: It becomes easier to handle errors specific to the object creation separately from those of the main form.

    • Data Management: Results from the modal can be returned and displayed in a datatable within the main form, ensuring a clear organization of nested objects.

  4. Implementation Tips:

    • Ensure the modal is user-friendly and intuitive, providing clear instructions and feedback.

    • Use appropriate validations and error messages within the modal to ensure data integrity.

    • Upon successful creation of the object, update the datatable in the main form to reflect the new data without requiring a full page refresh.

Last updated

Was this helpful?