Table of Contents
Note

This documentation describes the Tabs and TabItem Vue components for native UI views, for Xml templates see tabs.

Tabs / TabItem

Tabs is the tab container. Place TabItem children inside it to define each tab panel.

Import

import { Tabs, TabItem } from '@neos/design-system'

Tabs

v-model

Name Type Default Description
selectedIndex number -1 (auto: first visible tab) Index of the currently active tab

Emits

Event Payload Description
update:selectedIndex number Emitted when the user switches tabs

Slots

Slot Description
default Should contain TabItem children

TabItem

TabItem registers itself with the parent Tabs via inject. Must always be a direct child of Tabs.

Props

Prop Type Default Description
caption string '' Label shown in the tab header button
visible boolean \| object \| null undefined undefined = always visible; boolean = explicit control; passing an object = visible when non-null
icon string undefined Icon name displayed alongside the caption

Slots

Slot Description
default Tab panel content. Lazily mounted — renders a loading indicator until the tab first scrolls into view

Usage Examples

Basic tabs

<Tabs>
  <TabItem caption="General">
    <StringFormField property-name="name" />
    <StringFormField property-name="description" />
  </TabItem>
  <TabItem caption="Details">
    <DateFormField property-name="createdAt" />
    <NumberFormField property-name="priority" />
  </TabItem>
</Tabs>

Tabs with icons and controlled selection

<Tabs v-model:selected-index="activeTab">
  <TabItem caption="Info" icon="info">
    <InfoPanel />
  </TabItem>
  <TabItem caption="History" icon="history">
    <HistoryList />
  </TabItem>
  <TabItem caption="Settings" icon="settings">
    <SettingsForm />
  </TabItem>
</Tabs>

Conditionally visible tab

<!-- Tab only visible when `advancedMode` is true -->
<Tabs>
  <TabItem caption="Basic">
    <BasicForm />
  </TabItem>
  <TabItem caption="Advanced" :visible="advancedMode">
    <AdvancedForm />
  </TabItem>
</Tabs>

Tab visible only when an object is non-null

<!-- Tab visible when selectedRecord is non-null -->
<Tabs>
  <TabItem caption="List">
    <Datagrid />
  </TabItem>
  <TabItem caption="Edit" :visible="selectedRecord">
    <EditForm />
  </TabItem>
</Tabs>