Tabs

<Flex direction="row" gap="large" style={{ width: "100%", fontSize: "12px" }}>
  <Tabs.Root defaultValue="tab-one">
    <Tabs.List>
      <Tabs.Trigger value="tab-one" icon={<Info />}>
        Hoisting
      </Tabs.Trigger>
      <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
      <Tabs.Trigger value="tab-three" icon={<Info />}>
        Editor
      </Tabs.Trigger>
      <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
      <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab-one">
      <Text>General settings content</Text>
    </Tabs.Content>
    <Tabs.Content value="tab-two">
      <Text>Hosting configuration content</Text>
    </Tabs.Content>
    <Tabs.Content value="tab-three">
      <Text>Editor preferences content</Text>
    </Tabs.Content>
    <Tabs.Content value="tab-four">
      <Text>Billing information content</Text>
    </Tabs.Content>
    <Tabs.Content value="tab-five">
      <Text>SEO settings content</Text>
    </Tabs.Content>
  </Tabs.Root>
</Flex>

Usage

The Tabs component provides a way to organize content into multiple sections, displaying one section at a time.

import { Tabs } from "@raystack/apsara/v1";
 
<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab One</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab Two</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Tab one content</Tabs.Content>
  <Tabs.Content value="tab2">Tab two content</Tabs.Content>
</Tabs.Root>;

Tabs Props

Prop	Type	Default
`defaultValue`	`string`	-
`value`	`string`	-
`onValueChange`	`(value: string) => void`	-
`className`	`string`	-

Tabs.List Props

Prop	Type	Default
`className`	`string`	-

Tabs.Trigger Props

Prop	Type	Default
`value`	`string`	-
`icon`	`ReactNode`	-
`disabled`	`boolean`	-
`className`	`string`	-

Tabs.Content Props

Prop	Type	Default
`value`	`string`	-
`className`	`string`	-

Examples

Basic Tabs

<div style={{ width: "400px" }}>
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Password</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Account settings</Tabs.Content>
    <Tabs.Content value="tab2">Password settings</Tabs.Content>
    <Tabs.Content value="tab3">Other settings</Tabs.Content>
  </Tabs.Root>
</div>

With Icons

<div style={{ width: "400px" }}>
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Trigger value="tab1">Home</Tabs.Trigger>
      <Tabs.Trigger value="tab2" icon={<Info />} />
    </Tabs.List>
    <Tabs.Content value="tab1">Home</Tabs.Content>
    <Tabs.Content value="tab2">Info</Tabs.Content>
  </Tabs.Root>
</div>

Disabled Tab

<div style={{ width: "400px" }}>
  <Tabs.Root defaultValue="tab1">
    <Tabs.List>
      <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
      <Tabs.Trigger value="tab2" disabled>
        Disabled
      </Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Active tab content</Tabs.Content>
    <Tabs.Content value="tab2">Disabled tab content</Tabs.Content>
  </Tabs.Root>
</div>

Accessibility

Tabs follow the WAI-ARIA Tabs Pattern. They include the following accessibility features:

Keyboard navigation between tabs using arrow keys
Proper ARIA roles, states, and properties
Focus management for tab panels

Tabs

On this page