A dual-sided conditional container housing two separate element areas (Primary/True and Secondary/False) that swaps visible contents dynamically based on runtime expression evaluation or screen toggles. Supports border variants, padding configurations, and rich solid/gradient background overlays.

• Conditional container wrapping where child UI layouts must dynamically swap between two distinct view states (Primary/True side and Secondary/False side) based on expression logic.
• Grouping complex layout regions that require elevated/outlined container frames, custom padding controls, or solid/gradient background styling.

• Acts as a dual-sided structural container holding independent sets of child UI elements across Primary and Secondary canvas view layers.

• A dual-state dashboard panel displaying active operational metrics on the Primary (True) side and a placeholder onboarding layout on the Secondary (False) side.
• A feature container switching view states based on custom expression logic, styled with linear gradient backgrounds and custom padding bounds.

• Squeezing the conditional container into small layout dimensions when its nested children require ample space, allocate 12 grid columns wide and 12 rows tall.
• Using complex conditional containers for simple single-element visibility toggles, toggle the element’s direct visibility flag 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.

A labeled button (optional icon/color/variant) that runs an ordered list of actions when clicked.

• User must trigger one or more side effects (save, reload, notify, connector call).
• Multi-step action chains on a single click.
• Toolbar actions on forms, tables, charts, or modals.

Requires onTrigger (non-empty action list). Optional: icon, color, variant, disabled expression. Label via i18n key label. Each action that targets another element needs that element’s id on the same page (forms, tables, charts, modals, geojson fields).

A read-only display element that renders an array of text strings as styled badge chips, supporting array length limits and custom color, size, and variant formatting.

• Displaying read-only collections or arrays of strings (e.g. tags, badges, categories, emoji indicators) as styled chip tokens.
• Rendering dynamic string arrays retrieved from queries or calculated expressions with length caps and custom chip styling.

• Arrays of strings (string[]), tag lists, dynamic query array results, or calculated array expressions.

• A read-only tag display panel rendering an array of category labels assigned to a database record.
• A status metric tile displaying dynamic keyword chips with a maximum length cap and outlined primary styling.

• Using for interactive string array entries where users need to add or delete tags — use array_text_input instead.
• Using for single read-only text strings — use text_field instead.

Use instead

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 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, 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.

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.

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.

Read-only source code with syntax highlighting, and optionally a copy button.

• Showing a stored snippet, query or payload where the highlighting and monospaced layout carry meaning.

• Displaying the SQL behind a saved report.

• Using it for ordinary prose — a Text Field or Markdown Field reads better.
• Using it where the user is meant to edit; that is a Code Input.

Use instead

A read-only colored rectangle block that visually reflects a specified HEX value and can optionally print that color string in its center.

• Displaying a read-only visual color rectangle based on a HEX color string or dynamic color evaluation.
• Providing quick status color blocks, palette swatch summaries, or dynamic color indicators within a dashboard layout.

• A status tile showing the color code of a company’s custom branding palette element.
• A visual reference box showing an item’s tracked category color directly from a database hex string.

• Using as an interactive color picker input where users are expected to select or modify colors inside a form, use a dedicated color input component instead of this read-only color display field.
• Writing raw color names (e.g., ‘red’, ‘blue’) or invalid color strings in the color expression textbox instead of valid Hex color format strings (e.g., ‘#FFFFFF’ or ‘#FF0000’).
• Enabling ‘Show Value’ on small container tile sizes (e.g., 1x1 grid tiles) with low Width/Height slider percentages, which causes the centered Hex text string to clip or become illegible.

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.