Tabs

Tabs group controls into named panels where only one panel is visible at a time. Unlike a folder, a tabs control does not stack its children — it shows exactly one tab's contents and switches between them.

Try it

Usage

const tabs = pp.tabs({ label: "Rendering mode" });

const basic = tabs.tab({ label: "Basic" });
basic.slider({ label: "Brightness", value: 1, min: 0, max: 2 });

const advanced = tabs.tab({ label: "Advanced" });
advanced.slider({ label: "Gamma", value: 2.2, min: 1, max: 3 });

Each tab() call returns its own control container — controls added to basic are hidden while advanced is active, and vice versa.

Configuration

interface TabConfig extends BaseControlConfig {}

interface TabControl extends Control<TabConfig>, ControlContainer {}

interface TabsConfig extends BaseControlConfig {
  /** Index of the initially active tab. Defaults to 0. */
  activeIndex?: number;
}

interface TabsControl extends Control<TabsConfig> {
  tab(config: TabConfig): TabControl;

  getTabs(): readonly TabControl[];

  getActiveIndex(): number;
  setActiveIndex(index: number): this;
}

Switching tabs

tabs.setActiveIndex(1);

console.log(tabs.getActiveIndex()); // 1

Switching tabs does not destroy the hidden tab's controls or their values — inactive tabs behave like a hidden folder: controls remain part of the tree, keep their value, stay serializable, and pause continuous rendering while hidden (see Visibility).

Lifecycle

Destroying a TabsControl destroys every tab and everything nested inside each one, the same as destroying a folder. Destroying a single TabControl (via tab.destroy()) removes just that tab and its contents; if the destroyed tab was active, the next remaining tab becomes active.

Active tab is serialized

Unlike a row, a tabs control does carry state: its activeIndex is included by default in getState() — the same way a folder's expanded state is — so a shared URL or persisted panel reopens on the tab the user left active.