Tab

Initial selected tab id when `selectedTab` is not bound; defaults to the first non-disabled tab.

Bindable selected tab id.

Background treatment of the tab group surface.

Border style of the tab group surface.

Visual emphasis level of the tab group surface.

Corner radius of the tab group surface.

Tone color applied to the tab group surface.

Whether the tab group surface uses a translucent background.

Inner padding of the tab group surface.

Whether the tab group surface responds to hover/interaction states.

Fires when the user changes the selected tab.

Explicit id for the tab group (also used as the radio-group id). Generated when omitted.

Per-slot style and attribute override bag for the tab group's slots.

Astro / vanilla: serialize the props into `data-tab-group-config` so the client runtime hydrates this instance and `getPindoba(el, "tab-group")` can `update()` it. Astro sets it on every instance (tabs are interactive by nature). Frameworks with their own reactivity don't need it.

Visual treatment of the tab strip. `"tabs"` (the default) renders the minimal underline tab strip (Radio `appearance="tab"` — transparent tabs, a 2px accent bar under the selected one, and a baseline track); `"buttons"` renders each tab as a segmented button (Radio `appearance="button"`).

Paint the selection as one thumb that slides between tabs — the accent bar for `appearance="tabs"`, the raised pill for `"buttons"`. `false` keeps a static per-tab selection.

Whether tabs stretch to fill the strip. Off by default: tabs hug their labels and sit at the start, while the baseline track still spans the full width.

How the action slots are displayed relative to the tab strip.

Array of tab navigation items with id and label (plus per-tab extras).

Content rendered before the scrollable tab strip.

Content rendered after the scrollable tab strip.

Per-slot style and attribute override bag for the nav slots.

Astro / vanilla: serialize the props into `data-tab-nav-config` so the client runtime hydrates this instance and `getPindoba(el, "tab-nav")` can `update()` it. Astro sets it on every instance (tabs are interactive by nature). Frameworks with their own reactivity don't need it.

Unique identifier matching a tab ID — the panel's HTML id will be `panel-${id}`.

Explicit ID of the element labeling this panel (overrides the `groupId`-derived default; with neither, the attribute is omitted).

The tab group's id — `aria-labelledby` derives from it via the shared tab-element id shape, pointing at the visible `role="tab"` element.

Per-slot style and attribute override bag for the panel slots.

Astro / vanilla: serialize the props into `data-tab-panel-config` so the client runtime hydrates this instance and `getPindoba(el, "tab-panel")` can `update()` it. Astro sets it on every instance (tabs are interactive by nature). Frameworks with their own reactivity don't need it.