An interactive text input box that converts typed string entries into removable chip tags upon pressing Enter. Supports deleting individual tag chips or clearing all tags simultaneously.

• Capturing a collection or list of text strings (e.g., tags, keywords, email lists, categories) within a single interactive input field.
• Allowing users to type text strings, commit them as chip/tag tokens via the Enter key, and manage them individually (single deletion) or collectively (bulk clear).
• Binding array-of-strings schema properties to form data models.

Disabled by default until a default_form is present on the page layout. Requires selecting a valid Form Element ID and a Field Path targeting an array property (e.g. [’tags’]).

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 read-only informational visualization frame supporting rich text text formatting, optional colored identity accents, and dynamic item pagination bounds.

• Presenting filtered structural metrics, record lists, or query payloads cleanly to users without interactive input capabilities.
• Configuring dashboard utility banners, key metrics counters, or parsed data streams targeted directly at a database view shape rather than standard form parameters.

Requires configuring the Data Source framework parameters pointing cleanly at database views via custom data query selectors, identifier values, and extraction loops.

Invisible element that runs a data query and exposes data, loading, and error selectors for other elements on the page.

• A page needs a query result no visible element already loads — e.g. a KPI count, a lookup, or an aggregate used by several expressions.
• Two or more elements should share the same query result instead of each fetching it independently.
• It is typically created under the hood by other templates when they need shared query data.

Points at a view/query via dataSource.queryName, optionally with a fixed filter expression and a response format. It renders nothing; failures only surface when another element reads its error selector.

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 robust, highly searchable dropdown input supporting multi-select chips, selection checkboxes, highlighting matching search terms, and virtualization for long option lists.

• User needs to select a single or multiple values from a long, searchable list of options.
• Populating form fields with dynamic options fetched via query operations (e.g., list of users, products, categories).

Requires binding configuration to a parent Form via elementId and fieldPath. Options are populated either through a dynamic backend query (requiring queryName, identifier, and label fields) or through static option definitions.

A read-only rich typography layout block that parses and prints markdown shorthand tokens (like stars for text weight, dashes for lists, backticks for code) alongside alignment settings.

• Presenting rich textual content containing custom typography formatting (bold, italic), blockquotes, code blocks, or structured bullet lists.
• Rendering dynamic string content that blends hardcoded text with i18n localization keys via expressions.
• Displaying stylized informational sections where standard text containers are too limited and advanced layout customization is required.

• Rich text properties, stylized documentation strings, or computed string combinations processed dynamically via expression fields.

• A rich text layout container generating a custom message by joining explicit strings with translated references (e.g., ‘Hi ’ + i18n.text).
• Rendering software documentation blocks, formatting code blocks, or displaying organized bulleted policy updates.

• Using to display pure unformatted raw fields or numeric scores, use the simpler data_display component instead.
• Enabling the ‘HTML Allowed’ flag when rendering raw, unsanitized user inputs, which can introduce cross-site scripting security risks.

Use instead

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

An interactive input that can render as a checkbox, a switch, or a button with custom text labels, colors, and layout placements.

• User needs to toggle a binary value (true/false) or select a tri-state value (true/false/null) inside a form.
• Providing toggle switches, checkbox inputs, or toggle button behaviors for boolean form parameters.

Requires a parent Form context (default_form) on the page to resolve the Data Source connection (Element ID and Field Path).

A dynamic circular pie or donut chart visualizing categorical proportional shares, complete with slice value labels, customizable empty state colors, theme palettes, and interactive toolbox utilities (image export, clear selection, data view table).

• Visualizing proportional distributions, parts-of-a-whole relationships, or percentage share compositions.
• Displaying dynamic categorical datasets where each slice’s volume contributes to a total 100% sum.

Requires an active Source Query. Select a valid column property for Label (defines pie slices) and a numerical column for Value (defines slice volume). Every label field must map to a valid numeric value.