Tabs

Tabbed navigation with horizontal/vertical orientation and three visual styles. Built on Radix UI Tabs.

Import


import {
  Tabs, TabsList, TabsTrigger, TabsContent, TabsContainer,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Tabs";

Props

TabsTrigger (extra props beyond Radix defaults):

Prop	Type	Default	Description
`variant`	`"default" \| "contained" \| "underlined"`	`"default"`	Visual style
`icon`	`string`	—	Remote icon name (renders via RemoteIcon)
`fqcnBui`	`IFQCN_BUI`	—	Component identifier
`isLast`	`boolean`	`false`	Remove right border from last tab

Tabs (standard Radix props):

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initial active tab
`value`	`string`	—	Controlled active tab
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction

TabsContainer — wrapper that adds a border. No special props.

Usage

Basic


<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
    <TabsTrigger value="advanced">Advanced</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings...</TabsContent>
  <TabsContent value="billing">Billing settings...</TabsContent>
  <TabsContent value="advanced">Advanced settings...</TabsContent>
</Tabs>

Vertical


<Tabs defaultValue="details" orientation="vertical">
  <TabsList>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="history">History</TabsTrigger>
  </TabsList>
  <TabsContent value="details">...</TabsContent>
  <TabsContent value="history">...</TabsContent>
</Tabs>

With Icons


<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview" icon="home" fqcnBui={fqcn}>
      Overview
    </TabsTrigger>
    <TabsTrigger value="fields" icon="list" fqcnBui={fqcn}>
      Fields
    </TabsTrigger>
  </TabsList>
  ...
</Tabs>

Collapsible
Translation Modal — uses vertical tabs per language