Overview
Collapsible form sections group fields into a single unit that can be expanded or collapsed. Organize fields within these sections, configure their appearance, and set default display behaviors to manage form complexity.
Section Properties
Create Expandable Section
To group related form fields into a collapsible unit, add an expandable section. Open a form in the designer. From the component selector on the left panel, under grouping options, select and drag "Expandable Section". This action creates a container that users can open and close to reveal or hide its contents, simplifying complex forms.
Add Fields to Section
To include specific input fields within an expandable section, drag and drop desired fields directly into the section. This action groups the fields together, ensuring they appear within the collapsible area and inherit the section's functionalities.
Configure Section Styling
Expandable sections have two label options, one outside of the collapsable section visible all the time, the other within the collapsable section.
The outside panel label can be edited from within the control property on the right.
The inside section label can be edited from within the presentation property on the right.
To customize the visual appearance of an expandable section and its contained fields, access the section's properties. Adjust the panel's physical view, coloring, and labeling style. Use the children's style properties to apply styling that automatically carries over to all fields inside the section.
Inherited Styles
When configuring section styling, remember that children's style properties automatically apply to all fields within that section, streamlining your design process.
Set Section Display Options
To control how expandable sections behave when a form is opened, set the section's display options. from within Control Properties on the right. Choose to expand all sections automatically upon form opening or have them minimized by default. Name the section for clear identification.