Tabs container

A horizontal tab strip with multiple panels, only one panel visible at a time.

The Tabs container splits a form into independent panels accessible via a tab strip across the top. Useful when the form is long and the fields fall into clear categories, "General", "Address", "Notes", that the user only needs one at a time.

Tabs do not lazy-load: every panel's fields are mounted and validated even when the panel is not visible. The Submit button validates every tab.

Properties

Property	Description
`tabLabels` string[] default: `['Tab 1', 'Tab 2']`	Tab strip labels. The Nth child group renders under the Nth label.
`activeTab` number default: `0`	Index of the tab shown first in the designer and at runtime.
`tabVisibility` TabVisibilityRule[]	Per-tab visibility, parallel to `tabLabels` (index i ↔ tab i). Sparse, a missing / `null` entry means "show everywhere". Each rule AND-s four axes: `devices`, `modes` (new/edit/display), a `visibleIf` expression (with `visibleIfModes`), and audience trimming via `showForGroups` / `hideForGroups`.

JavaScript recipes

Open on a specific tab

f365.events.onLoad(() => {
  // by label …
  f365.tabs()?.setActive('Details');
  // … or by index
  f365.tabs()?.setActive(0);
});

Step through tabs with custom buttons

const tabs = f365.tabs();
if (tabs) {
  tabs.next(); // clamps at the last tab
  tabs.prev(); // clamps at the first tab
}

Read the current tab state

const tabs = f365.tabs();
if (tabs) {
  console.log(tabs.active, 'of', tabs.count); // active index, total count
  console.log(tabs.labels[tabs.active]); // current tab label
}

Jump to a tab when a field changes

f365.events.onChange('Country', (value) => {
  if (value === 'Other') f365.tabs()?.setActive('Address');
});

f365.tabs() handle

Property	Description
`id` string \| null	Container id, or null if unidentified.
`active` number	Index of the currently visible tab.
`count` number	Total number of tabs.
`labels` readonly string[]	Tab labels in order.
`setActive(indexOrLabel)` (number \| string) => void	Switch to a tab by index or by label.
`next()` () => void	Advance to the next tab (clamps at last).
`prev()` () => void	Go to the previous tab (clamps at first).
`el()` () => HTMLElement \| null	The tabs container DOM element.

Accordion container
A vertical stack of collapsible panels, one or more can be expanded at a time.
Section container
A grouping block that visually separates related fields with a heading and optional collapse behaviour.