Skip to content

Elements

Elements are the building blocks placed on the form canvas. Each element occupies one or more columns within a row and has its own configuration panel.

Element catalogue

Layout

ElementDescription
Grid LayoutA multi-row container for arranging other elements side-by-side
Repetitive GridA repeating grid that users can add or remove rows of at runtime

Input

ElementDescription
Input FieldSingle-line text input (text, email, password, and more)
Number InputNumeric input with increment/decrement controls
Date / Time PickerDate, time, or combined datetime picker
File UploadFile attachment — single or multiple files
SelectDropdown for choosing one value from a predefined list
OptionsCheckboxes (multi-select) or radio buttons (single-select)

Display

ElementDescription
Static TextA lightweight heading or label
Text DisplayRich header + body block with full typography and border controls
ImageStatic image loaded from a URL
SeparatorHorizontal rule for dividing form sections

Action

ElementDescription
ButtonSubmit the form, navigate to a URL, or run a custom script

Shared layout properties

Every element has a Layout section in its property panel. These properties control how the element is positioned and styled within its row.

Column

column — the column span of the element within its row.

ValueBehaviour
col-growFill all remaining available width in the row
col-1col-12Fixed fraction of the 12-column grid

Spacing

Padding and margin each accept the same size tokens:

TokenApproximate size
none0
xs4 px
sm8 px
md16 px
lg24 px
xl48 px
  • pl / pr / pt / pb — inner padding (left, right, top, bottom)
  • ml / mr / mt / mb — outer margin (left, right, top, bottom)

Card styling

These three flags affect the element's card wrapper:

PropertyDescription
flatRemove elevation / drop shadow
borderedAdd a border around the card
squareRemove border-radius (sharp corners)

S-Launch