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

Prop

Type

List

Prop

Type

Tab

Prop

Type

Content

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