Tabs

Displays content in a tabbed interface

Usage

Use Tabs to organize related content into a tabbed interface. Place your tab controls inside Tabs.List, optionally include Tabs.Indicator for an active-state underline or highlight, and render one Tabs.Content panel per tab.

import { Tabs, Text } from "@elemnts-ui/react";

<Tabs defaultValue="tab-1">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="tab-1">
    <Text>Tab 1 Content</Text>
  </Tabs.Content>
  <Tabs.Content value="tab-2">
    <Text>Tab 2 Content</Text>
  </Tabs.Content>
</Tabs>;

Vertical

Use the orientation prop to change the orientation of the tabs.

Disabled

Set the disabled prop on Tabs.Trigger to disable a specific tab.

Sizes

Use the size prop to change the size of the tabs.

Variants

Use the variant prop to change the appearance of the tabs.

API Reference

Tabs

The root component that manages tab state.

Prop	Type	Default
activationMode	`"manual" \| "automatic"`	`"automatic"`
asChild	`boolean`	`false`
composite	`boolean`	-
defaultValue	`string`	-
deselectable	`boolean`	-
hideMode	`HideMode`	`"display-none"`
id	`string`	-
ids	`Partial<{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string }>`	-
lazyMount	`boolean`	`false`
loopFocus	`boolean`	`true`
navigate	`(details: NavigateDetails) => void`	-
onFocusChange	`(details: FocusChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
translations	`IntlTranslations`	-
unmountOnExit	`boolean`	`false`
value	`string`	-
variant	`"primary" \| "secondary" \| "tertiary"`	`"primary"`

TabsRootProvider

Provides a tabs state machine created with useTabs.

Prop	Type	Default
value	`UseTabsReturn`	required
asChild	`boolean`	`false`
hideMode	`HideMode`	`"display-none"`
lazyMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`

TabsContext

Provides access to tabs state and helpers.

TabsList

Wraps the set of tab triggers.

Prop	Type	Default
asChild	`boolean`	`false`

TabsTrigger

A control that activates its associated tab.

Prop	Type	Default
value	`string`	required
asChild	`boolean`	`false`
disabled	`boolean`	-

TabsIndicator

A visual indicator that tracks the active tab.

Prop	Type	Default
asChild	`boolean`	`false`

TabsContent

The content panel associated with a tab.

Prop	Type	Default
value	`string`	required
asChild	`boolean`	`false`

TabsPanel

A styled container for content inside TabsContent.

Prop	Type	Default
asChild	`boolean`	`false`