Skip to content

Group

The Group element is a layout container that organizes multiple related fields into a visual group. Drag other elements into a Group for structured field organization.

Basic

Label (required)

The heading text of the group. Depending on the Group Style setting, this heading appears in different ways.

Description

The description text of the group, displayed beneath the group heading.

Group Style

The visual presentation of the group. Available options:

  • Default: Default style; shows the group border and heading
  • Show Title: Shows only the heading, no border
  • Blank: Shows no heading or border

Style selection suggestions

  • Default: Best when you want a clear distinction between form sections (e.g., "Personal Information", "Contact Information")
  • Show Title: Best for clean layouts that need a heading but no border
  • Blank: Best for logical grouping only, with no need for visual boundaries

Logic

Enable conditional logic

When enabled, configure rules to show or hide the entire group (including all elements within the group) based on the user's input in other fields.

Rule match mode

After enabling conditional logic, first set the rule match mode:

  • Match any condition (any): The entire group shows or hides when any one rule is satisfied
  • Match all conditions (all): The entire group shows only when all rules are satisfied

Configure rules

Each rule consists of three parts:

PartDescription
FieldSelect a target field from the dropdown (displays the field's Label)
OperatorThe comparison condition
ValueThe target value to compare against

Supported operators

OperatorDescription
isTriggers when the field value equals the specified value
is notTriggers when the field value does not equal the specified value
is emptyTriggers when the field value is empty
is not emptyTriggers when the field value is not empty

Add and manage rules

  • Click the Add logic rule button to add a new rule
  • Click the 🗑 button on the right of each rule to delete it
  • Click the button to add more match conditions

Use cases

Group conditional logic controls all elements within the group simultaneously. For example, when the user selects "Yes" for "Fill in shipping information", the entire "Shipping Information" group (containing fields like address, city, and zip code) appears together:

  • Match mode: Match any condition
  • Field: Fill in shipping information
  • Operator: is
  • Value: Yes

Advanced

Unique ID (required)

The unique identifier of the group. Unlike other elements, the Group's Unique ID is editable and can be set manually.

Layout container

Group is a layout container element that produces no submission data, so it has no validators, filters, Data, or other settings. Its purpose is to organize multiple fields together and control their display uniformly.

Next steps

  • Row — Row and column layout container
  • Form building — Learn how to organize form structure
  • Form settings — Configure form styles and notifications

Built with VitePress