Intro
The create and edit pattern is displayed as a form that lets users generate or update an object.
Create dialog on compact (left) and expanded screen (right)
Usage
Use a create form pattern for adding new items, modifying existing details, or handling data input changes.
Anatomy
A. Top App Bar
The top app bar contains:
- Screen title that specifies the object it is creating.
- “Close” icon on the left to discard the new object without saving.
- “Save” button on the right to generate the new object based on information filled in this dialog.
B. Body
The body can include component types such as list picker form cells, key value cells, text fields, switch form cells, date and time pickers, and attachments, among others.
Schematic create dialog anatomy
Behavior and Interaction
Launch
The create form is usually triggered by either tapping the “Add” icon button in the top app bar or the floating action button.
Actions
“Close” Icon Button
The “Close” icon allows users to close the dialog without committing any changes. If nothing has been entered by the user, the dialog is closed directly. If there is unsaved input, a confirmation dialog appears, asking users to confirm their action.
“Save” Button
The “Save” button creates an item based on user input. By default, the new entry is displayed.
If there is no individual item page, display the parent page after saving, for example, recording readings for an equipment. Ideally, scroll to the part where the user’s changes are visible.
Closing a create dialog with unsaved changes triggers a confirmation dialog
Draft Handling
For entries that haven’t been saved yet, draft handling should be implemented to prevent data loss in case of an interruption and to allow users to resume editing at a later time.
Navigation
Navigation within a create form depends on the control element and on the container/view where the form is displayed, which can vary depending on the window size.
Variations
Pre-Create in a Dialog
In certain scenarios, it is best to use a dialog as the initial step to create a new entry, including only essential and mandatory fields to generate the instance. This allows for a quick setup of items, with the option to complete the more complex form later in a view that provides more space.
Create flow using a dialog for a quick entry and the detail pane or a full-screen modal to complete the form
Complex Forms
For forms with several fields and complex components, using a full-screen modal or a detail pane in a list-detail layout is advisable. This helps improve functionality and user experience by minimizing distractions, allowing for easier management of detailed tasks. These forms use the screen space effectively, ensuring all form elements are accessible, and streamline navigation by reducing the need for scrolling.
Create form in a full-screen modal (left) and in a detail pane (right)
Adaptive Design
Based on the window size class, the following layout options are available for create forms:
- Pane
- Full-screen modal
- Dialog
On compact and medium screens, the create flow appears in a full-screen modal.
On expanded, large and extra-large screens, the create flow can be displayed in a dialog, a pane, or in a full-screen modal.
List-Detail Layout
In a list-detail layout in an expanded window, the content of a create flow can be maintained in a two-pane layout or in a full-screen modal.
Create flow in a two-pane list-detail layout or a full-screen modal
Supporting Pane Layout
In a supporting pane layout in an expanded window size, the create flow can be displayed in a dialog or a full-screen modal. Depending on the components used in the form, additional navigation may be required. However, we do not recommend displaying a dialog on top of another, for example, a date picker on top of a form dialog. In such cases, opt for a full-screen modal and display a dialog on top.
Create flow in a supporting pane layout displayed in a dialog or a full-screen modal