Core Forms
Get Core Forms

Containers

Containers are structure fields that hold other fields inside them. Core Forms has two container types: Fieldset and Container. Both support adding, removing, reordering, and nesting child fields through the visual builder's drag-and-drop system.

Fieldset

A fieldset groups related fields under a labeled section heading. It renders as an HTML <fieldset> element with a <legend>.

What It Renders

<fieldset>
    <legend>Shipping Address</legend>
    <p>
        <label>Street</label>
        <input type="text" name="shipping-street" required />
    </p>
    <p>
        <label>City</label>
        <input type="text" name="shipping-city" required />
    </p>
    <p>
        <label>Zip Code</label>
        <input type="text" name="shipping-zip" required />
    </p>
</fieldset>

When to Use

  • Grouping fields that belong together semantically (address, payment details, personal info).
  • Providing a visible label for the group via the <legend> element.
  • Improving form accessibility -- screen readers announce the legend when entering the group.

Inspector Properties

Property Description
Legend The text displayed in the <legend> element
CSS Class Optional class(es) applied to the <fieldset> element

Container

A container is a generic <div> wrapper. It has no semantic meaning on its own but is useful for layout and styling purposes.

What It Renders

<div class="form-row">
    <p>
        <label>First Name</label>
        <input type="text" name="first-name" />
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" name="last-name" />
    </p>
</div>

When to Use

  • Creating multi-column layouts by applying a CSS grid or flexbox class.
  • Wrapping fields that should be shown or hidden together via conditional logic.
  • Applying shared styling to a group of fields.

Inspector Properties

Property Description
CSS Class Class(es) applied to the <div> element (e.g., two-columns, form-row)

Adding Fields Inside a Container

There are three ways to add fields inside a container or fieldset:

1. Click the Add Field Button

When a container is on the canvas, it displays a small + Add field button at the bottom of its body area. Clicking this button opens the inserter panel with the new field targeted to be placed inside the container.

2. Drag Fields In

Drag an existing field from elsewhere on the canvas and drop it onto the container's body area. A blue drop indicator highlights the container when a field is dragged over it, showing where the field will land.

3. Add via Inserter While Container Is Selected

Select the container on the canvas, then click a field type in the inserter panel. The new field is appended inside the selected container rather than at the root level of the form.

Moving Fields Out of a Container

To move a field out of a container and back to the root level:

  • Arrow-up button -- When hovering over a field inside a container, an arrow-up icon button appears alongside the duplicate and delete buttons. Clicking it moves the field out of the container and places it directly after the container at the root level.
  • Drag out -- Drag the field outside the container's drop zone and release it at the desired position on the canvas.

Reordering Fields Inside a Container

Fields inside a container can be reordered by dragging them within the container body. The drop indicator line appears between fields to show the insertion point. The reordering behavior is the same as reordering root-level fields.

Nested Containers

Containers can be placed inside other containers to create deeper nesting. This is useful for complex form layouts that require multiple levels of grouping.

How Nesting Works

  • Drag a Container or Fieldset field type onto the body of an existing container.
  • Or select the parent container and add a new Container/Fieldset via the inserter.
  • The nested container appears indented on the canvas with a subtle border to distinguish nesting levels.

Example: Nested Layout

<div class="form-section">
    <h3>Contact Details</h3>
    <div class="form-row">
        <p>
            <label>First Name</label>
            <input type="text" name="first-name" />
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" name="last-name" />
        </p>
    </div>
    <div class="form-row">
        <p>
            <label>Email</label>
            <input type="email" name="email" />
        </p>
        <p>
            <label>Phone</label>
            <input type="tel" name="phone" />
        </p>
    </div>
</div>

Nesting Limits

There is no hard limit on nesting depth, but deeply nested structures become difficult to manage in the visual builder. Two to three levels of nesting cover the vast majority of real-world form layouts.

Drag-and-Drop Behavior

The visual builder uses a unified @dnd-kit context that handles both root-level and container-level drag-and-drop in a single system.

Drop Zones

When dragging a field, the following drop zones are active:

Zone Visual Indicator Result
Between root-level fields Horizontal blue line Field placed at root level
Between fields inside a container Horizontal blue line (indented) Field placed inside the container
Over a container body (empty area) Container background highlights blue Field appended to end of container

Drop Indicator

A blue horizontal line appears at the exact position where the field will be inserted. When dragging over a container, the entire container body receives a subtle blue background highlight to indicate the field will be dropped inside it.

Dragging Between Containers

You can drag a field from one container directly into another container. The field is removed from the source container and added to the target container in a single operation.

Dragging Containers

Containers themselves can be dragged and reordered just like regular fields. When you drag a container, all of its child fields move with it. You can also drag a container into another container to create nesting.

Containers in Code Mode

In the code editor, containers are represented as their HTML equivalents. A fieldset is a <fieldset> element and a container is a <div> element. The parser recognizes these elements and reconstructs the container hierarchy when syncing back to the visual builder.

<!-- Fieldset in code mode -->
<fieldset>
    <legend>Billing</legend>
    <p><label>Card Number</label><input type="text" name="card-number" /></p>
    <p><label>Expiry</label><input type="text" name="expiry" /></p>
</fieldset>

<!-- Container in code mode -->
<div class="inline-fields">
    <p><label>City</label><input type="text" name="city" /></p>
    <p><label>State</label><input type="text" name="state" /></p>
</div>

When switching from Code to Visual mode, the parser identifies <fieldset> and <div> elements and converts them to container field types with their children properly nested.

Conditional Visibility on Containers

You can apply data-show-if or data-hide-if attributes to a container to show or hide all fields inside it at once. This is more efficient than applying conditions to each field individually.

<fieldset data-show-if="has-shipping" data-show-if-value="yes">
    <legend>Shipping Address</legend>
    <p><label>Street</label><input type="text" name="shipping-street" /></p>
    <p><label>City</label><input type="text" name="shipping-city" /></p>
</fieldset>

In the visual builder, select the container and configure the condition in the Conditions tab of the inspector.