Tabs

The Tabs component organizes content into separate sections, where only one section is visible at a time.

Anatomy

A Tabs component is made up of several key parts:

TabsList – The container that groups all tab triggers together.
- TabsTrigger – The clickable element that activates a tab.
TabsContent – The container that holds the content for a tab.

To add a Tabs component to your page:

Insert the Tabs component from the Library.
Update the default text in each TabsTrigger to describe their respective content.
Modify the content within each TabsContent as needed.

By default, the first tab is active. If you want a different tab to be open initially:

Select the Tabs component and go to the Properties Panel.
Add the defaultValue property and set it to the value of the tab you want active (for example, change it from '1' to '2' if you want the second tab open).

To disable a tab, preventing users from selecting it:

You can customize the Tabs appearance and its subcomponents by adjusting their properties through the Properties Panel:

Tabs: Adjust styles like background color, border, and padding to create a card-like appearance or any other desired look.
TabsList: Modify layout-related properties, such as the gap between tab triggers, background color, and padding.
TabsTrigger: Adjust the look of each tab trigger—set background, border radius, and text styles. For consistency, create a shared class and apply it to all triggers.
TabsContent: Customize active content panels by setting background color, padding, and typography.

If you prefer vertical tabs instead of the default horizontal layout:

Select the Tabs component and navigate to the Properties Panel.
Set the display as flex and add a gap value to create spacing between the tabs list and the content.
Select the TabsList, go to the Properties Panel, and update its direction to “Top to Bottom”.

Property	Type	Description	Description
defaultValue	`string`	`‘1’`	The value of the TabsContent to initially show. This corresponds to the value prop on the TabsTrigger component and the value prop on the TabsContent component. If no value is set on the TabsContent component, you can use their order instead, starting with `‘1’` (e.g., `‘1’`, `‘item-1’`)
activationMode	`‘manual’	‘automatic’`	`‘automatic’`
onValueChange	`Action`	-	The function called when a new tab is selected.

Property	Type	Description	Description
loop	`boolean`	`true`	When `true`, keyboard navigation will last tab to first, and vice versa.

Property	Type	Description	Description
value	`string`	`‘1’`	A unique value to be used by Tabs in the defaultValue property and as the value when open. If no value is provided, the order of the TabsTrigger will be used starting with `'1'`. A unique value for the tab trigger. If not set, the order is used starting from "1".
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the TabsTrigger.

Property	Type	Description	Description
value	`string`	`‘1’`	A unique identifier for the tab content. This should match the value of the corresponding TabsTrigger.