A container that holds a form or display of information. Form sheet helps identify different content blocks.
This pattern is used in form scenarios, usually to display a form, multiple forms or a combination of single/multiple forms and one or several sheets to display information.
There are some main elements created in order to define the form hierarchy and to present different use cases:
The following image represents a complete description of the component. Although in any of the use cases is used as displayed in this image, it helps define its elements.
Although the content will normally be a form with a variable number of inputs, as a container, it can also contain a table, list, or text content.
The examples below serve as an example of use cases for the form sheet.
Free content allows using the sheet with any kind of content inside. Users just benefit from the sheet style that provides consistency along the platform.
A usage example can be found in Web Content.
Many of our admin interfaces present single form configuration. For them it is relevant to present a title, an optional description, several sections with content, and the buttons to submit the form.
An example in DXP can be found in the user form below “Users & Organizations”.
There are situations where having multiple forms is a need of the product. This usage is restricted to Commerce due to their product needs.
Multiple forms configuration forces to not have general form buttons per form sheet and a general “save” action is centralized in a single button. This action must check the status and validate each of the form sheet changes.
See Commerce product screen. In this case, you can find free content usage, display relevant product information, and several form sheets, each one to capture different product
A common usage of the sheet is to present a dataset display inside. This case benefits of the sheet title and the content free space to place elements such as the dataset display.
This usage can be found in fragments, categories, and tags, among others.
Spacing around the frame and in between sections content is 24px. Each section is spaced from the next one 48px. Visit Form hierarchy for more information.