Tabs Block
The Tabs block is a tabbed container: a horizontal strip of tabs where selecting one shows its content. Tabs has two sources — Manual, where you author each tab by hand and every tab owns its own canvas area, and Mapped, where the strip is generated from a data source and all tabs share one content area.
| Manual | Mapped | |
| Tab strip source | Hand-authored list | Generated from a data source |
| Content areas | One canvas area per tab | One shared content area for all tabs |
| Per-tab options | Full set (disabled, error, visibility, permissions…) | Mapping fields (label, value, link, badge, icon) plus Disabled and Error conditions |
| Default tab | Open by Default dropdown (supports conditions) | Initial Value expression |
Tabs — Top-Level Properties
| Property | Type | Default | Description |
| tabType | "manual" | "mapped" | manual | Where tabs come from. New blocks start with 3 example tabs in Manual mode |
| items | array of tabs | 3 example tabs | Hand-authored tab list. Only for Manual type |
| mappedTab | data mapping | — | Data source mapping that generates the strip. Only for Mapped type |
| defaultValue | string (tab value) | first tab | The tab selected at load. Supports conditional values in manual mode (Open by Default) |
| slots.header | block slot | — | Container rendered above the tab strip |
| slots.footer | block slot | — | Container appended at the end of each manual tab's content panel (not available in Mapped) |
| slots.divider | block slot | — | A small element rendered between tab items in the strip. Not available with vertical orientation. |
| interactions | event list | — | Attaches actions to the On Change event |
| permissions | permission rule | — | Restricts who sees the whole block |
Manual Tab Properties
Open a tab from Inspector → Content → Tabs to configure each individual tab:
Property | Type | Default | Description |
|---|---|---|---|
Label | string (translatable) | generated | The tab's visible title |
Disabled | condition | off | When true, tab is visible but cannot be selected |
Error | condition | off | When true, tab renders in error styling |
To | string | — | A URL or path for the tab. When set, the tab renders as a link, so clicking it navigates to that address |
Badge | string (translatable) | — | Small counter text shown next to the label |
Start Icon | icon (conditional) | — | Icon shown before the label |
Icon Color | color | — | Color of the start icon. Pill variant (web) only |
Visibility | conditions | visible | Show/hide this individual tab |
Permissions | permission rule | — | Restrict who sees this individual tab |
Mapped Tabs — Configuration
With Mapped type, configure a data source and field mappings:
Property | Required | Description |
|---|---|---|
Data Source | Required | The array of objects — one tab per row |
Value | Required | The field holding each tab's unique value |
Label | Required | The field holding each tab's display title |
Disabled | Optional | A condition evaluated for each row. When true, that tab is visible but cannot be selected |
Error | Optional | A condition evaluated for each row. When true, that tab renders in error styling |
To | Optional | Per-row link target |
Badge | Optional | Per-row badge text |
Start Icon | Optional | Per-row icon before the label |
Start Icon Options | Optional | Per-row icon styling (e.g., color). Used by pill-style tabs |
Initial Value | Optional | The tab value to select at load. Falls back to the first tab |
Warning: Data Source + Value + Label are all required. Until all three are set, the block shows an "Invalid configuration" notice instead of the strip.
Tabs Events & Methods
| Event / Method | Type | Description |
| On Change | Event | Fires when the user selects a different tab. Does NOT fire for programmatic tab switches |
| Change Tab | Method | Switches the active tab programmatically. Takes a Destination Tab value. Does not fire On Change |
Tabs — Exposed State
Binding | Type | Description |
|---|---|---|
| array | The resolved tabs (id, label, value, disabled, error, badge, visible) after filtering |
| tab object | The currently selected tab |
| number | Position of the active tab in the visible strip |
| tab object | The tab that opened on first load (the configured default, or the first tab if that value matches no tab). It doesn't change as the user switches tabs |
| string | The active tab's value (kept for backward compatibility) |
| tab object | The owning tab, available inside a tab's content area. In Mapped mode, the data row of the active tab |
| number | The position of the owning tab |
Tabs Behaviors & Gotchas
Warning: Hidden/permission-blocked tabs disappear entirely: They are removed from the strip; activeTabIndex counts only surviving tabs. Use Disabled when you want a visible-but-locked tab.
Warning: If the active tab vanishes, the block snaps to the default: If the current tab is removed (visibility flips, permissions change, mapped row disappears), the block auto-selects the default tab. No On Change fires for this reset.
Note: Tab strip scrolls, doesn't wrap: When tabs don't fit the available width, the strip becomes horizontally scrollable — tabs never wrap to a second row. For tab variants, orientation and icon styling, see Tabs Appearance Variants.
Note: Change Tab targets a tab by its value: On a mapped strip, the value must exist in the currently loaded rows.
Note: Footer slot belongs to content, not the block: Footer renders at the end of each manual tab's content — it scrolls with the panel. In mapped mode the footer doesn't render at all.
Stepped Container Block
The Stepped Container holds the page content for each step of a wizard. You link it to a Stepper V2 or classic Stepper block with its Stepper setting; it maintains one content panel per step and swaps panels automatically as the user navigates. The panel list is managed for you — add, rename, or remove steps on the linked stepper and the container's panels follow.
Note: Only the active step's panel is rendered. Panels for other steps are absent from the page, not hidden — blocks inside them don't run until the user reaches that step.
Stepped Container Properties
Property | Type | Description |
|---|---|---|
Stepper ( | block reference (Stepper / Stepper V2) | Content → Stepper. The stepper block this container follows. Required for panels to appear |
items | array (auto-managed) | Per-step panels. Generated automatically from the linked stepper — not directly editable |
interactions | event list | On Click — fires when user clicks anywhere in the container |
permissions | permission rule | Restrict who sees the block |
styles | style set | Width, height, flex layout, margin, padding, gap, overflow, background, shadow, stroke, radius. New containers start with large gap, primary background, xl padding |
visibility | conditions | Show/hide the whole container |
theme | inherit | light | dark | Theme override for all panel content |
Stepped Container — Exposed State
Binding | Type | Description |
|---|---|---|
| string | The linked stepper block ID |
| array | The per-step panels (label, step value, panel content reference) |
| object | The container's resolved style settings. It is part of every block's state; you rarely need it in bindings |
Stepped Container Behaviors & Gotchas
Warning: No matching panel = container disappears entirely: If no stepper is linked, or the current step has no panel, the block renders nothing — not an empty box. A "vanished" container means the Stepper property is unset or the step value matches no panel.
Warning: Changing a step's value orphans its panel: Panels are matched by step value, not label. Renaming a step relabels the panel, but changing a step's underlying value creates a fresh empty panel — the content you built for the old value is no longer reachable.
Warning: Panels are created at build time: If the linked stepper's steps come from data and a new step value appears only at runtime, the container has no panel for it — that step shows nothing.
Note: Steps with sub-steps get no panel: The container creates panels only for leaf steps (no sub-steps). Parent steps are skipped — put the parent's content in its first sub-step.
Example: Linking a Stepped Container to a Stepper
Add a Stepper V2 (or a classic Stepper) and set up its steps, for example Details, Address and Review.
Add a Stepped Container below it. In its Content panel, open Stepper and pick the stepper block.
The container creates one panel per step. Select each step's panel and drop that step's blocks into it.
Add Back and Next buttons. In each button's On Click, add Trigger Component Method, pick the stepper and choose Move to previous step or Move to next step. The container swaps panels as the stepper moves.
Tabs vs. Stepped Container
Feature | Tabs | Stepped Container |
|---|---|---|
Navigation model | Free — user can visit any tab in any order | Ordered — follows a Stepper block's current step |
Content areas | Manual: one per tab. Mapped: one shared | One panel per step, auto-managed |
Data-driven | Yes (Mapped type) | No (panels follow the stepper) |
Tab strip / progress header | Built-in tab strip | Provided by the paired Stepper block |
Reacting to a change | On Change fires when the user selects a tab | No step-change event on the container; react to the linked stepper. Its On Click fires on any click inside the container |
Methods | Change Tab | None (navigation via stepper) |