Tabs

Tabs organize content into multiple sections that can be toggled to reveal different content while keeping the same container.

Preview

Account

Make changes to your account here.

Username

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@e-infra/design-system'

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
</Tabs>

Components

Component	Description
`Tabs`	Container component
`TabsList`	Container for tab triggers
`TabsTrigger`	Clickable tab button
`TabsContent`	Content for each tab

Props

Tabs

Prop	Type	Default	Description
defaultValue	string	-	Default active tab (uncontrolled)
value	string	-	Active tab (controlled)
onValueChange	(value: string) => void	-	Callback when tab changes
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Radix UI Tabs props

TabsTrigger

Prop	Type	Default	Description
value	string	-	Tab value (required)
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Radix UI Trigger props