Common Properties
When you select an element on the canvas, its settings open in a panel made of collapsible sections. A Component ID sits at the top, followed by a subset of Value, Appearance, Layout, and Rules — every element uses the same building blocks, though some rename a section (e.g. Image uses Element Settings) or add their own.
This page documents the controls that are shared across elements, so the individual element pages can focus on what is unique to each. Layout and Rules behave identically everywhere.
Component ID
Every element has a Component ID — a unique identifier used to reference the element in visibility and validation rules, in scripts, and as its key in the form's submission output.
When you add an element the system generates a unique ID automatically. The field is locked by default; click the lock to edit it. The value:
- may contain letters, numbers, and underscores only,
- must be unique within the form,
- is required (it cannot be left blank).
Value
The Value section holds the data-entry settings of input elements. Which controls appear depends on the element (each element page lists its own); the shared ones are:
| Control | Description |
|---|---|
| Input data type | The kind of value collected (e.g. text, number, email). The available types are listed on each element's page |
| Default value | The value pre-filled when the form loads |
| Value mask | An input mask that constrains/format the typed value |
| Readonly | Value is shown but cannot be edited. Mutually exclusive with Required |
| Clearable | Shows a clear (×) button to reset the value |
| Required | The field must be filled in before the form can submit. Mutually exclusive with Readonly |
Display and layout elements (which collect no data) replace this section with their own — for example Image's Element Settings or Separator's Separator Settings.
Label
Input elements share a Label group (shown at the top of their Appearance section):
| Control | Description |
|---|---|
| Label Text | The field's label |
| Label Color | Label colour (theme colour — see Colours) |
| External Label | An optional secondary label rendered outside the field, with its own Color, Size (Caption / Body / Subtitle / Large), Weight (Regular / Medium / Bold), and Alignment (Left / Center / Right) |
Appearance
The Appearance section is assembled from the groups below. Each element exposes only the groups relevant to it (its page notes which).
Colours
Colours are chosen from your theme's colour variables (a theme-token picker), not entered as raw hex — so they follow the active theme. Unset colours show Theme Default.
| Colour | Applies to |
|---|---|
| Background color | The element's background |
| Input text color | The value/content text |
| Label color | The label text |
| Accent color | Accent highlights (where supported) |
Display
| Control | Description |
|---|---|
| Dense | Tighter/compact spacing |
| Left label | Place the label to the left of the control instead of above |
| Autogrow | Grow a multi-line text area to fit its content (text-area inputs only) |
| Lift on hover | Raise the element with a lift effect on hover |
| Size | Extra small, Small, Medium, Large, or Extra large |
| Shadow Elevation | Drop-shadow depth — a slider from None to 24 |
Border & Shape
| Control | Description |
|---|---|
| Border | Toggle a border on; when on, exposes a Border Color (theme colour) |
| Border Size | Border thickness — slider, 1–10 px |
| Border Radius | Corner rounding — slider, 0–24 px |
Layout
The Layout section is the same on every element. It positions the element in its row and sets the whitespace around it.
Column Width
A form row is divided into a 12-column grid; elements in the same row share that width. The Column Width dropdown offers:
| Option | Width behaviour |
|---|---|
col-2, col-4, col-6, col-8, col-10, col-12 | A fixed fraction of the 12-column row — col-12 fills the whole row, col-6 half, col-4 a third, col-2 a sixth |
col-auto | Only as wide as the element's content needs |
col-grow | At least as wide as its content, then grows to fill any spare space in the row |
col-shrink | At most as wide as its content, shrinking when the row runs short of space |
Margin & Padding
Margins and padding are set on a visual box editor — one stepper per side (top, right, bottom, left) — chosen from a fixed list of sizes; you cannot type a custom value. Margin is the space outside the element; padding is the space inside it.
| Size | |
|---|---|
None | 0 |
XS | extra-small |
SM | small |
MD | medium |
LG | large |
XL | extra-large |
Rules
The Rules section governs an element's runtime behaviour. Rules can be built visually (point-and-click conditions) or written as code.
- Visibility — show or hide the element based on conditions evaluated against other fields. Available on every element. See Visibility.
- Validation — constrain what the user may submit, with a custom error message. Available on input elements only. See Validation.
Conditions support operators such as Equals, Not equals, Is empty / Is not empty, Greater / Less than, Contains, Starts / Ends with, and list/toggle checks, combined with ALL (AND) / ANY (OR) groups.
See also: Elements overview