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

Element	Description
Grid Layout	A multi-row container for arranging other elements side-by-side
Repetitive Grid	A repeating grid that users can add or remove rows of at runtime

Input

Element	Description
Input Field	Single-line text input (text, email, password, and more)
Number Input	Numeric input with increment/decrement controls
Date / Time Picker	Date, time, or combined datetime picker
File Upload	File attachment — single or multiple files
Select	Dropdown for choosing one value from a predefined list
Options	Checkboxes (multi-select) or radio buttons (single-select)

Display

Element	Description
Static Text	A lightweight heading or label
Text Display	Rich header + body block with full typography and border controls
Image	Static image loaded from a URL
Separator	Horizontal rule for dividing form sections

Action

Element	Description
Button	Submit 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.

Value	Behaviour
col-grow	Fill all remaining available width in the row
col-1 … col-12	Fixed fraction of the 12-column grid

Spacing

Padding and margin each accept the same size tokens:

Token	Approximate size
none	0
xs	4 px
sm	8 px
md	16 px
lg	24 px
xl	48 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:

Property	Description
flat	Remove elevation / drop shadow
bordered	Add a border around the card
square	Remove border-radius (sharp corners)