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.Trigger value="tab-one" icon={<Info />}>
5        Hoisting
6      </Tabs.Trigger>
7      <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
8      <Tabs.Trigger value="tab-three" icon={<Info />}>
9        Editor
10      </Tabs.Trigger>
11      <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
12      <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
13    </Tabs.List>
14    <Tabs.Content value="tab-one">
15      <Text>General settings content</Text>
16    </Tabs.Content>
17    <Tabs.Content value="tab-two">
18      <Text>Hosting configuration content</Text>
19    </Tabs.Content>
20    <Tabs.Content value="tab-three">
21      <Text>Editor preferences content</Text>
22    </Tabs.Content>
23    <Tabs.Content value="tab-four">
24      <Text>Billing information content</Text>
25    </Tabs.Content>
26    <Tabs.Content value="tab-five">

Usage

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

Tabs Props

Prop

Type

Tabs.List Props

Prop

Type

Tabs.Trigger Props

Prop

Type

Tabs.Content Props

Prop

Type

Examples

Basic Usage

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
5      <Tabs.Trigger value="tab2">Password</Tabs.Trigger>
6      <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
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 Icons

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

Disabled Tab

1<div style={{ width: "400px" }}>
2  <Tabs defaultValue="tab1">
3    <Tabs.List>
4      <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
5      <Tabs.Trigger value="tab2" disabled>
6        Disabled
7      </Tabs.Trigger>
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

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