How do I use the Section Component?

Modified on Tue, 8 Oct at 9:16 AM

The Section Component is a foundational element for organizing form content.  Nearly all other components must be placed inside a Section, making it essential for form structure.  It’s always 12 columns wide and holds all components in a single row.  If the total width of the components exceeds 12 columns, they will wrap to a new row within the same section.

When should I use a Section?

Sections are used to organize related components on a form.  You can apply formatting to Sections, such as adding borders and background colors to visually distinguish them.  All components (except for Groups, Action Buttons, and Page components) must be placed inside a Section.  Sections can also hold Tiles, which allow you to format components in smaller column widths.  If you need to apply Display Logic to multiple Sections at once, you can nest them within a Group.



Features & Configuration

Adding a Section to your form is simple. Select the Section option from the component library and drag it onto the canvas. Components can then be placed inside the Section.


After placing the component, you can customize its properties in the right-hand panel:

Logic

Display Logic
Use Display Logic to control when this Section is shown or hidden based on other form inputs.

Keep in Mind...
If the Section itself is hidden, all components inside it will also be hidden — even if their individual display logic is set to show. The Section’s display logic takes priority over the components within it.
Read more about Display Logic

Attributes

Wide Alignment
Enable this toggle to stretch the section to the full width of the container.
Border
Toggle the border option to add a border around the Section.
Border Weight
If the border is enabled, set the border thickness from 1 to 8 pixels.
Border Color
If the border is enabled, choose a color for the border by selecting from the color spectrum or entering a hex code.
Background Color
Customize the background color of the Section for better visual separation or branding.
Margin Top
Add space above the Section by setting the top margin, in pixels.
Margin Bottom
Add space below the Section by setting the bottom margin, in pixels.

Details

ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive for easy reference.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article