A read-only checkbox representing the output evaluation of a boolean expression.

• Presenting simple binary flags or states (true/false) to users.
• Evaluating conditional dynamic expressions that resolve to a boolean or null value.

• Displaying a read-only checkbox representing an active/inactive record state.
• Evaluating checkmark UI indicators using conditional true/false/null backend logic.

• Using for interactive form inputs where users need to check or uncheck a box to submit data, use boolean_input instead.
• Allocating large layout grid dimensions (e.g., spanning multiple rows or wide column blocks), keep this compact display element restricted to 1 row height and 1 to 2 grid columns.
• Writing complex string or object expressions in the booleanExpression textbox instead of resolving directly to boolean values (true, false) or null.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A code editor bound to a form field, with syntax highlighting for the configured language.

• Editing a stored snippet, template or query where indentation and highlighting matter.

• Editing an email template stored on the record.

• Using it for structured JSON that should be validated — a JSON Input reports parse errors.
• Using it for short single-line values, where the editor chrome outweighs the benefit.

Use instead

A image display viewport with support for direct uploads, storage path resolution, custom URL expressions, click-to-expand full size previews, frame borders, and image fitting modes.

• Displaying static or dynamic images sourced from internal storage, uploaded files, or external URLs.
• Presenting visual assets with fit scaling controls (e.g., scale to fit, adjust to width/height, stretch) and full-size click-to-expand preview capabilities.

• Image URLs, relative storage paths, file system asset keys, or custom dynamic image expressions.

• A profile overview tile rendering a user avatar retrieved dynamically from internal storage paths with click-to-expand preview enabled.
• An image gallery asset display loading an external HTTPS image path with scale-to-fit formatting and frame borders.

• Squeezing image displays into tiny layout boxes — allocate at least 3 rows high and 6 columns wide for comfortable image viewing.
• Using as a file upload input element — use the storage_file_input component instead to allow user file selections.

Use instead

A row of buttons rendered as one connected control, so a set of related actions reads as a single choice rather than scattered buttons.

• Two or more actions that belong together and share styling, such as Save / Save and close / Cancel.

• The action bar at the foot of a form.
• A group of filter shortcuts above a table.

• Mixing unrelated actions into one group — the shared framing implies the buttons are alternatives to each other.
• Putting a single button in a group; place the button directly instead.

Pairs well with

A clickable colored input block covering its container area that launches a full popout color picker selection window when clicked. If configured, a plain uncolored label is rendered adjacent to the color block.

• Allowing users to pick a color visually using an advanced popup color picker panel.
• Binding user-selected colors as hex string data values within database records.

Deactivated by default. Requires an active connection to a parent default_form element via Element ID and Field Path attributes.

A clickable, highly styleable action button (with optional custom icons and colors) that executes a named backend API function and runs cascading event-driven actions on completion.

• Invoking specific backend function queries or API endpoints directly upon click.
• Executing transactional backend processes that require custom HTTP headers (such as raw JSON, XML, or binary payloads).
• Running an ordered list of frontend UI mutations, reloads, or notifications as post-execution side effects.

Requires specifying a configured backend function name in the setup properties. Optionally accepts custom content-type request headers and sequential trigger operations.

An interactive date input text box featuring an inline calendar icon button that opens a visual popup date picker menu layer to capture user selections.

• Allowing users to select or enter a specific date, time, or complete timestamp within an interactive form.
• Configuring bounded calendar dropdown selectors with explicit past or future validation constraints (Minimum/Maximum dates).

Disabled by default until a valid default_form component is present on the page layout canvas. Requires pairing via Element ID and Field Path attributes.

A circular track progress ring featuring a hollow layout center that highlights the percentage status directly in the middle as a formatted number.

• Visualizing statistical percentages, metrics, or completion rates bounded strictly between 0 and 100.
• Displaying progress tracking metrics cleanly within dashboard grid cells, panels, or summary headers.

• Integer metrics, query outputs containing aggregate values, or computational scores evaluated in expression mode.

• A storage dashboard element showing ‘75% storage capacity utilized’.
• A learning management portal tracking a student’s ‘45% course completion rate’.

• Using for unconstrained values or numbers outside the 0–100 percentage range (e.g. currency amounts, raw unit counts, or negative numbers), which distorts the circular ring calculation.
• Setting an extreme Thickness (e.g., near 40) paired with a small container Size or a large typography Variant (e.g., ‘h1’), which causes the center percentage text to overflow or overlap the ring stroke.
• Using as an interactive input element where users are expected to drag or click to adjust a metric, use a slider or number input component instead.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

An interactive, grid-based Geographic Information System. workspace dashboard featuring zooming dials, layers drag handles, polyline/polygon drawing anchors, and interactive element deletion triggers.

• Allowing users to draw, edit, and capture spatial map structures (points, lines, regions) within form views.
• Binding geographic coordinates or feature vectors directly into database records via standard GeoJSON structures.

Locked by default until paired inside a form frame context. Connection opens when clicking the ‘+’ data trigger to establish Element ID and Field Path references.

A compact interactive action button decorated with a clipboard icon and text label that copies a target string value directly to the user’s system clipboard on click.

• Allowing users to instantly copy strings, API keys, codes, URLs, or dynamic expression outputs to their system clipboard upon clicking a button.
• Providing quick-copy utilities alongside read-only code blocks, order IDs, or access tokens.

• Static strings, generated codes, API keys, dynamic query field values, or calculated string expressions.

• A copy button positioned next to a user API key input that copies the secret key string to the clipboard.
• A quick-action button in an order confirmation view copying the generated tracking code.

• Using to submit form payloads or trigger database mutations — use a standard action button or submit button component instead.
• Allocating unnecessarily large grid canvas dimensions — keep this compact button component sized to 1 row tall and 2 to 4 columns wide.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.