How do I use the Section Component?

Modified on Mon, 2 Jun at 11:05 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 Show/Hide Rules to multiple Sections at once, you can nest them within a Group.

Features & Configuration

Adding a Section to your form is simple. Select any component from the component library and drag it onto the canvas above or below any existing Sections. Components can then be placed inside the Section.

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

Rules

Show/Hide Field
Use Show/Hide rules 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 show/hide rule is set to show. The Section’s display rules take priority over the components within it.

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.