Tabs

A set of layered sections of content that display one panel at a time.
1<Flex direction="row" gap="large" style={{ width: "100%", fontSize: "12px" }}>
2  <Tabs defaultValue="tab-one">
3    <Tabs.List>
4      <Tabs.Tab value="tab-one" leadingIcon={<Info />}>
5        Hoisting
6      </Tabs.Tab>
7      <Tabs.Tab value="tab-two">Hosting</Tabs.Tab>
8      <Tabs.Tab value="tab-three" leadingIcon={<Info />}>
9        Editor
10      </Tabs.Tab>
11      <Tabs.Tab value="tab-four">Billing</Tabs.Tab>
12      <Tabs.Tab value="tab-five">SEO</Tabs.Tab>
13    </Tabs.List>
14    <Tabs.Content value="tab-one">
15      <Text>General settings content</Text>

Anatomy

Import and assemble the component:

1import { Tabs } from "@raystack/apsara";
2

3<Tabs>
4  <Tabs.List>
5    <Tabs.Tab />
6  </Tabs.List>
7  <Tabs.Content />
8</Tabs>

API Reference

Root

Groups all parts of the tabs component.

Prop

Type

List

Renders the tab navigation bar.

Prop

Type

Tab

Renders an individual tab button.

Prop

Type

Content

Renders the content panel for a tab.

Prop

Type

Examples

Basic Usage

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Account</Tabs.Tab>
5      <Tabs.Tab value="tab2">Password</Tabs.Tab>
6      <Tabs.Tab value="tab3">Settings</Tabs.Tab>
7    </Tabs.List>
8    <Tabs.Content value="tab1">Account settings</Tabs.Content>
9    <Tabs.Content value="tab2">Password settings</Tabs.Content>
10    <Tabs.Content value="tab3">Other settings</Tabs.Content>
11  </Tabs>
12</div>

With Leading Icons

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Home</Tabs.Tab>
5      <Tabs.Tab value="tab2" leadingIcon={<Info />}>
6        Info
7      </Tabs.Tab>
8    </Tabs.List>
9    <Tabs.Content value="tab1">Home content</Tabs.Content>
10    <Tabs.Content value="tab2">Info content</Tabs.Content>
11  </Tabs>
12</div>

Disabled Tab

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Tab value="tab1">Active</Tabs.Tab>
5      <Tabs.Tab value="tab2" disabled>
6        Disabled
7      </Tabs.Tab>
8    </Tabs.List>
9    <Tabs.Content value="tab1">Active tab content</Tabs.Content>
10    <Tabs.Content value="tab2">Disabled tab content</Tabs.Content>
11  </Tabs>
12</div>

Accessibility

  • Follows the WAI-ARIA Tabs pattern
  • Supports keyboard navigation with arrow keys between tabs
  • Uses role="tablist", role="tab", and role="tabpanel"
  • Active tab is indicated with aria-selected