Columns container

Lay out child fields in 2, 3, or 4 columns. Collapses to one column on mobile.

The Columns container places its children side-by-side in 2, 3, or 4 columns on desktop and tablet, collapsing to a single column on mobile.

For more precise layouts with explicit grid placement, drop fields directly onto the form's responsive 12-column grid, the Columns container is the simplest option for "these three fields should sit on one row".

Properties

Property	Description
`columnCount` number default: `2`	Number of side-by-side columns (clamped to a minimum of `1`). Typically 2, 3, or 4.

The container has no value of its own, it only arranges its child fields. Address the children by their own field keys from JavaScript.

JavaScript recipes

Show/hide the fields inside the container

// The container itself is layout-only; toggle the child fields directly.
// onChange fires for every field, branch on e.fieldKey.
f365.events.onChange((e) => {
  if (e.fieldKey === 'SameAsBilling') {
    const same = e.newValue;
    f365.field('ShipStreet').visible = !same;
    f365.field('ShipCity').visible = !same;
    f365.field('ShipPostcode').visible = !same;
  }
});

Collapse to a single column on display forms

f365.events.onLoad(() => {
  if (f365.context.displayMode === 'display') {
    f365.tryControl('AddressColumns')?.el()?.classList.add('f365-stacked');
  }
});

React to mode changes

f365.events.onModeChange(({ to }) => {
  // e.g. reveal an extra child field only while editing
  f365.field('InternalNotes').visible = to === 'edit' || to === 'new';
});

Section container
A grouping block that visually separates related fields with a heading and optional collapse behaviour.
Table layout
Explicit row by column grid for tabular form sections, Customer / Product / Quantity headers across the top, repeating rows beneath.