Skip to main content
Learnengineawesome

Group

The Group block is a container that wraps other blocks so they can be treated as a single unit. Once you put blocks inside a Group, you can apply a background color, border, padding, or conditional visibility to all of them at once. Instead of styling or showing/hiding each block individually, you manage the whole section through the Group.

When to use it

  • Creating card-style sections with a background color and rounded border to visually separate parts of a layout.
  • Wrapping a set of related fields (like a billing address section) so they can be shown or hidden together based on a condition.
  • Adding a consistent background or padding to a group of elements without repeating the same styling on each block.
  • Organizing a complex layout into clearly defined visual zones.
  • Conditionally showing an entire form section - for example, only displaying "Shipping Details" when the user selects "Needs Shipping" from a dropdown.

How to add it

  1. Open the layout editor.
  2. Click Add Block where you want the grouped section to appear.
  3. Select Group from the block type list.
  4. Add blocks inside the Group by clicking Add Block within the Group container.
  5. In the Group's settings panel, configure background color, border, padding, and margin as desired.
  6. Optionally enable Conditional Visibility and set a field condition to control when the Group appears.
  7. Save and publish your layout.

Conditional visibility

One of the most powerful features of the Group block is conditional visibility. You can set a rule that hides or shows the entire Group based on the value of another field in the form. Supported field types for conditions include:

  • Dropdown - show the group when a specific option is selected.
  • Radio buttons - show the group when a specific choice is selected.
  • Yes/No field - show the group when the toggle is set to Yes (or No).
  • Checkbox - show the group when the checkbox is checked.

Example

You have a client intake form with a Yes/No field called "Billing Required". Below it, you want to show a set of billing fields - Account Number, Billing Address, and PO Number - but only when billing is actually needed. You wrap those three fields in a Group and enable conditional visibility: show this Group only when "Billing Required" equals Yes. Now the billing section is completely hidden until the user toggles that field on, keeping the form clean for clients who don't need billing details.

Tips

  • You can nest Groups inside other Groups for multi-level layout structure - for example, a bordered card Group containing a Row Group of buttons.
  • The sticky position option keeps the Group pinned to the top of the screen as users scroll - useful for a persistent action bar.
  • Groups add structure without adding complexity for users - they only see the final layout, not the container structure.
← PreviousTextNext →Row