Tabs

This documentation covers the Tabs component, which is a set of components for creating tabs with customizable styles and behavior. The component is built on top of the Radix UI library.

Account

Importing

To use the Tabs component, import it as follows:

import { Tabs } from '@ef-global/backpack/Tabs';

Components

The Tabs component consists of 4 subcomponents:

Tabs.Root
Tabs.List
Tabs.Trigger
Tabs.Content

Tabs.Root

This is the root container for the tabs.

Prop	Type	Description
`className`	`string`	Additional class name(s) for the root.
`defaultValue`	`string`	The default tab value.
`value`	`string`	The currently active tab value.
`onValueChange`	`function`	Callback when the active tab changes.
`children`	`ReactNode`	Child components within the root.

Tabs.List

This is the container for the tab triggers.

Prop	Type	Description
`className`	`string`	Additional class name(s) for the list.
`ariaLabel`	`string`	ARIA label for accessibility purposes.
`children`	`ReactNode`	Child components within the list (triggers).

Tabs.Trigger

This is the tab trigger button.

Prop	Type	Description
`className`	`string`	Additional class name(s) for the tab.
`value`	`string`	The value of the tab.
`children`	`ReactNode`	Child components within the trigger.

Tabs.Content

This is the content container for each tab.

Prop	Type	Description
`className`	`string`	Additional class name(s) for the content.
`value`	`string`	The value of the tab.
`children`	`ReactNode`	Child components within the content.

Example

Account

<Tabs.Root defaultValue='account'>
  <Tabs.List aria-label='Manage your account'>
    <Tabs.Trigger value='account'>Account</Tabs.Trigger>
    <Tabs.Trigger value='password'>Password</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value='account'>
    <div>Account</div>
  </Tabs.Content>
  <Tabs.Content value='password'>
    <div>Password</div>
  </Tabs.Content>
</Tabs.Root>

Tables Tags