TabPane

One labelled view within Tabs, with its own content surface, icon and availability state.

TabPane

View source · API reference

Each pane needs a unique ID. Tabs owns the group and initial selection.

Preview release

The content is ready for review.

All checks passed

Review the source before publishing.

No previous releases.

<Tabs
  group="pane-release"
  selectedTab="pane-overview"
  ariaLabel="Release information"
  tabVariant="underline"
>
  <TabPane id="pane-overview" label="Overview" icon="lucide:check">
    <h3>Preview release</h3>
    <p>The content is ready for review.</p>
  </TabPane>
  <TabPane id="pane-checks" label="Checks">
    <Badge tone="success">All checks passed</Badge>
    <p>Review the source before publishing.</p>
  </TabPane>
  <TabPane id="pane-history" label="History · unavailable" :disabled="true">
    <p>No previous releases.</p>
  </TabPane>
</Tabs>

Independent panel styling

Pane variant styles the content surface; tabVariant styles the tab control.

A distinct panel surface.

A quiet alternative.

<Tabs group="pane-style" selectedTab="pane-details" ariaLabel="Styled views">
  <TabPane
    id="pane-details"
    label="Details"
    tone="accent"
    variant="surface"
    tabVariant="outline"
  >
    <p>A distinct panel surface.</p>
  </TabPane>
  <TabPane id="pane-notes" label="Notes" tone="neutral" variant="none">
    <p>A quiet alternative.</p>
  </TabPane>
</Tabs>

Behavior and accessibility

Keep IDs unique across the document, including the generated -label and -panel suffixes. Disabled panes remain unavailable to selection. The standard tabs runtime supplies keyboard controls and responsive selection; content stays mounted while switching views.

API reference

TabPane contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

id

string
Default
generated

Unique pane identity and base for its label/panel IDs.

label

RefOrValue<string>
Default
id

Visible tab label.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

disabled

RefOrValue<boolean>
Default
false

Disables interaction. Use a bound boolean, for example :disabled="isLocked".

group

string
Default
parent Tabs group

Radio group. Usually inherit it from Tabs so selection stays coordinated.

tone

RefOrValue<SemanticTone>
Default
parent Tabs tone

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
none

Treatment of the pane content surface.

variantMode

RefOrValue<ComponentVariantMode>
Default
parent Tabs, then stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

tabVariant

RefOrValue<ComponentVariant>
Default
parent Tabs, then underline

Visual treatment for the tab control, independent of the panel variant.

Composition

Default slot: panel content. Place TabPane inside Tabs. Register defineTabsComponents and defineIconComponents; SSG includes the tabs runtime automatically.