Tabs
A tab strip with one nested group per tab; nested components pick their tab through layout.slot (a tab id).
A tab strip with one nested group per tab; nested components pick their tab through layout.slot (a tab id).
Add it to an app
- Open the app builder and find Tabs in the component palette.
- Insert it into the intended region or container.
- Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
- Connect its events where the app should respond to a user gesture.
- Preview with representative data and save after resolving validation problems.
The type name in the builder’s code view is tabs.
Settings
| Setting | Accepted value | Required | Default | What it controls |
|---|---|---|---|---|
Accessible name of the tab strip (label) | string | No | "Tabs" | Supports expression bindings. |
Tabs (each id is a slot) (tabs) | list of object | No | [{"id":"tab_1","label":"Tab 1"},{"id":"tab_2","label":"Tab 2"}] | Literal only; do not use an expression binding. Literal entries { id, label }: the id is the slot a nested component names (lowercase snake_case, ≤32 chars), the label is what the tab shows. |
id (tabs[].id) | string; pattern ^[a-z][a-z0-9_]{0,31}$ | Yes | Not specified | — |
label (tabs[].label) | string | No | Not specified | — |
Values available to bindings
| Value | Type | Initial value | Meaning |
|---|---|---|---|
activeTab | string or null | null | The id of the active tab (settles onto the first tab at mount when unset or unknown). |
Refer to these values through components.<component-id>.<value> in a binding. Use the identifier assigned to this instance of Tabs, not the component type name.
Events
onChange— Fires when the user activates another tab (click, arrow, Home, End).
Connect only the actions the app needs. An event can fetch results, run an enabled data source, set state, update another component, show a notification, or navigate where supported.
Keyboard and accessible labels
Accessible label source: The label prop names the strip; each panel is labelled by its tab.
-
Tab reaches the active tab only (roving focus); the panel is the next stop
-
ArrowLeft / ArrowRight move to and activate the previous / next tab, wrapping
-
Home / End move to and activate the first / last tab
Example: Overview and details tabs
| Setting | Example value |
|---|---|
label | "Views" |
tabs | [{"id":"overview","label":"Overview"},{"id":"details","label":"Details"}] |
If it is empty or unavailable
Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.