Spacer

An empty element for vertical spacing in the layout.

Widget description: `spacer`

Spacer is an empty element that inserts vertical spacing between fields or blocks. Use it when you need more space than the standard field gap provides. It is a virtual widget: it renders no visible content, stores no data, and is skipped by screen readers.

Spacer widget settings: height in pixels, presets, and narrow-screen toggle

Adding to the form

On the Widgets tab, select Spacer and drag it into a section (or click “+”). A new spacer has a height of 24 px and spans the full width of the section. In the designer it appears as a labeled bar; in the live form it is invisible.

Inspector settings

Option	Property	Description	Default
Height (px)	`spacerConfig.height`	Height from 1 to 400 px. Enter a number or use the presets 8, 16, 24, 32, 48, 64 px. Out-of-range values are clamped to the nearest allowed value.	24
Hide on narrow screens (stacked fields)	`spacerConfig.hideWhenStacked`	On narrow forms (under 640 px, where fields stack vertically), the spacer is not rendered. Useful for spacers that only align side-by-side columns.	no
Builder label	`customLabel`	Used only to identify the spacer in the editor; not displayed on the form.	“Spacer”
Column span, Visible	`colSpan`, `defaultVisible`	Common widget options. The spacer occupies grid space just like a field.	12, yes

Required and Read-only options are not available for the spacer.

Runtime behavior

In all modes (New, Edit, View), it renders an empty block of the configured height.
A section containing only spacers is rendered. A section containing spacers alongside other fields is shown based on those fields: spacers alone will not keep a section visible if rules hide all other fields.
When hidden by a rule (setVisible), the spacer disappears along with its height.

Text translations

Spacer has no translatable text.

Rules and scripts

A rule can only show or hide a spacer (setVisible). Typical use case: a spacer that disappears together with a hidden block of fields so no empty gap remains.

Configuration example (JSON)

{
  "internalName": "widget_spacer_1",
  "customLabel": "Spacer before budget",
  "fieldType": "spacer",
  "colSpan": 12,
  "defaultVisible": true,
  "spacerConfig": {
    "height": 32,
    "hideWhenStacked": true
  }
}

Layout canvas with a spacer between two fields. Shows the spacer bar with its configured height and selection in the inspector

Limitations and tips

A spacer occupies a grid cell. In a multi-column section, match the height of an adjacent column by placing a spacer in the same column.
For a visible separator, use Text Block with the Divider (Line) variant.
The height is fixed and does not adapt to the content of surrounding fields.