Row

The Row element is a row and column layout container that displays multiple fields side by side on the same row. You can set the number of columns, customize the width of each column, and control responsive breakpoints.

Basic

Number of columns

How many columns the row is divided into. Available options:

• 1, 2 (default), 3, 4, 5, 6, 7, 8, 10 columns

TIP

After adding a Row element and setting the number of columns, drag other elements into each column to create a side-by-side layout. For example, with 2 columns, you can display "First Name" and "Last Name" fields side by side.

Customize column widths (%)

The width percentage of each column. Each column corresponds to an input box; enter a number to set that column's percentage of the total width.

Column width allocation

• By default, columns are equally distributed (e.g., 2 columns at 50% each)
• You can customize unequal distribution — for example, set 2 columns to 30 and 70 to make the first column narrow and the second wide
• The sum of all columns' width percentages should be 100

Responsive columns

The screen width at which the multi-column layout automatically stacks into a single column. Available options:

• inherit: Uses the global responsive configuration in Form style settings
• Off: No stacking; always keeps the multi-column layout
• Phone portrait (479px): Stacks into a single column on portrait phones (below 479px)
• Phone landscape (767px): Stacks into a single column on landscape phones (below 767px)
• Tablet landscape (1024px): Stacks into a single column on landscape tablets (below 1024px)

Responsive suggestions

• On mobile, we recommend stacking into a single column for a good reading experience on small screens
• The larger the breakpoint chosen (e.g., 1024px), the earlier it stacks into a single column, improving the mobile experience
• If inheriting the global setting, configure it centrally in the Responsive columns section of Form style settings

Logic

Enable conditional logic

When enabled, configure rules to show or hide the entire row (including all elements within the row) 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 row shows or hides when any one rule is satisfied
• Match all conditions (all): The entire row shows only when all rules are satisfied

Configure rules

Each rule consists of three parts:

Part	Description
Field	Select a target field from the dropdown (displays the field's Label)
Operator	The comparison condition
Value	The target value to compare against

Supported operators

Operator	Description
is	Triggers when the field value equals the specified value
is not	Triggers when the field value does not equal the specified value
is empty	Triggers when the field value is empty
is not empty	Triggers 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

Row conditional logic controls all elements within the row simultaneously. For example, when the user selects "International shipping", show the row containing "Country", "City", and "Zip Code" fields:

• Match mode: Match any condition
• Field: Shipping method
• Operator: is
• Value: International shipping

Advanced

Unique ID (required)

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

Layout container

Row is a layout container element that produces no submission data, so it has no validators, filters, Data, or other settings. Its purpose is to achieve a multi-column side-by-side layout of fields.

Row vs Group

Feature	Group	Row
Purpose	Visual grouping (border + heading)	Multi-column side-by-side layout
Column count control	❌	✅ (1-10 columns)
Column width customization	❌	✅ (percentage)
Responsive breakpoint	❌	✅ (configurable stacking)
Group style	✅ (Default/Show Title/Blank)	❌

Using together

Group and Row can be nested. For example, place multiple Rows inside a Group to create a complex multi-column layout with headings.

Next steps

• Group — Visual grouping container
• Form building — Learn how to organize form structure
• Form style settings — Global responsive column settings