0
# Core Components
1

2
Complete set of accessible React components for building tabbed interfaces with keyboard navigation and ARIA compliance.
3

4
## Core Imports
5

6
```javascript
7
import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
8
```
9

10
## Capabilities
11

12
### Tabs Component
13

14
Main container component that manages tab state, handles keyboard navigation, and provides controlled/uncontrolled behavior.
15

16
```typescript { .api }
17
/**
18
 * Main container component for tab functionality
19
 * Manages state, keyboard navigation, and accessibility
20
 * @param props - TabsProps configuration object
21
 * @returns JSX element rendering as div with data-rttabs attribute
22
 */
23
const Tabs: React.FunctionComponent<TabsProps>;
24

25
interface TabsProps extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'onSelect' | 'ref'> {
26
  /** CSS class name(s) for the container */
27
  className?: string | string[] | { [name: string]: boolean };
28
  /** Focus tabs on initial render */
29
  defaultFocus?: boolean;
30
  /** Initial tab index for uncontrolled mode */
31
  defaultIndex?: number;
32
  /** Text direction for RTL support */
33
  direction?: 'rtl' | 'ltr';
34
  /** CSS class for disabled tabs */
35
  disabledTabClassName?: string;
36
  /** Disable up/down arrow key navigation */
37
  disableUpDownKeys?: boolean;
38
  /** Disable left/right arrow key navigation */
39
  disableLeftRightKeys?: boolean;
40
  /** Ref callback for the root DOM element */
41
  domRef?: ((node?: HTMLElement) => void);
42
  /** Window environment for SSR compatibility */
43
  environment?: Window;
44
  /** Focus tab when clicked */
45
  focusTabOnClick?: boolean;
46
  /** Force render all tab panels */
47
  forceRenderTabPanel?: boolean;
48
  /** Selection change callback */
49
  onSelect?: ((index: number, last: number, event: Event) => boolean | void);
50
  /** Selected tab index for controlled mode */
51
  selectedIndex?: number;
52
  /** CSS class for selected tab */
53
  selectedTabClassName?: string;
54
  /** CSS class for selected tab panel */
55
  selectedTabPanelClassName?: string;
56
}
57
```
58

59
**Usage Examples:**
60

61
```javascript
62
// Uncontrolled mode with default settings
63
<Tabs>
64
  <TabList>
65
    <Tab>Tab 1</Tab>
66
    <Tab>Tab 2</Tab>
67
  </TabList>
68
  <TabPanel>Content 1</TabPanel>
69
  <TabPanel>Content 2</TabPanel>
70
</Tabs>
71

72
// Controlled mode
73
const [selectedIndex, setSelectedIndex] = useState(0);
74

75
<Tabs 
76
  selectedIndex={selectedIndex}
77
  onSelect={(index) => setSelectedIndex(index)}
78
>
79
  <TabList>
80
    <Tab>Tab 1</Tab>
81
    <Tab>Tab 2</Tab>
82
  </TabList>
83
  <TabPanel>Content 1</TabPanel>
84
  <TabPanel>Content 2</TabPanel>
85
</Tabs>
86

87
// With custom styling and initial focus
88
<Tabs 
89
  className="my-tabs"
90
  defaultIndex={1}
91
  defaultFocus={true}
92
  selectedTabClassName="active-tab"
93
>
94
  <TabList>
95
    <Tab>Tab 1</Tab>
96
    <Tab>Tab 2</Tab>
97
  </TabList>
98
  <TabPanel>Content 1</TabPanel>
99
  <TabPanel>Content 2</TabPanel>
100
</Tabs>
101
```
102

103
### TabList Component
104

105
Container for Tab components that renders as an accessible `<ul>` element with `role="tablist"`.
106

107
```typescript { .api }
108
/**
109
 * Container component for Tab elements
110
 * Renders as ul element with role="tablist"
111
 * @param props - TabListProps configuration object
112
 * @returns JSX element rendering as ul with role="tablist"
113
 */
114
const TabList: React.FunctionComponent<TabListProps>;
115

116
interface TabListProps extends Omit<HTMLProps<HTMLUListElement>, 'className'> {
117
  /** CSS class name(s) for the tab list */
118
  className?: string | string[] | { [name: string]: boolean };
119
}
120
```
121

122
**Usage Examples:**
123

124
```javascript
125
// Basic tab list
126
<TabList>
127
  <Tab>First Tab</Tab>
128
  <Tab>Second Tab</Tab>
129
  <Tab>Third Tab</Tab>
130
</TabList>
131

132
// With custom styling
133
<TabList className="custom-tab-list">
134
  <Tab>First Tab</Tab>
135
  <Tab>Second Tab</Tab>
136
</TabList>
137

138
// With multiple class names
139
<TabList className={["tab-list", "horizontal", { "dark-theme": isDark }]}>
140
  <Tab>First Tab</Tab>
141
  <Tab>Second Tab</Tab>
142
</TabList>
143
```
144

145
### Tab Component
146

147
Individual tab elements that render as `<li>` elements with `role="tab"` and full ARIA attributes.
148

149
```typescript { .api }
150
/**
151
 * Individual tab element with accessibility features
152
 * Renders as li element with role="tab" and ARIA attributes
153
 * @param props - TabProps configuration object
154
 * @returns JSX element rendering as li with role="tab"
155
 */
156
const Tab: React.FunctionComponent<TabProps>;
157

158
interface TabProps extends Omit<HTMLProps<HTMLLIElement>, 'className' | 'tabIndex'> {
159
  /** CSS class name(s) for the tab */
160
  className?: string | string[] | { [name: string]: boolean };
161
  /** Whether the tab is disabled */
162
  disabled?: boolean;
163
  /** CSS class for disabled state */
164
  disabledClassName?: string;
165
  /** CSS class for selected state */
166
  selectedClassName?: string;
167
  /** Tab index for keyboard navigation */
168
  tabIndex?: string;
169
}
170
```
171

172
**Usage Examples:**
173

174
```javascript
175
// Basic tabs
176
<Tab>Home</Tab>
177
<Tab>About</Tab>
178
<Tab>Contact</Tab>
179

180
// Disabled tab
181
<Tab disabled>Coming Soon</Tab>
182

183
// With custom styling
184
<Tab 
185
  className="custom-tab"
186
  selectedClassName="tab-active"
187
  disabledClassName="tab-disabled"
188
>
189
  Dashboard
190
</Tab>
191

192
// With event handlers
193
<Tab 
194
  onClick={handleTabClick}
195
  onKeyDown={handleKeyDown}
196
>
197
  Settings
198
</Tab>
199
```
200

201
### TabPanel Component
202

203
Content areas that render as `<div>` elements with `role="tabpanel"` and conditional visibility.
204

205
```typescript { .api }
206
/**
207
 * Content area for tab panels with conditional rendering
208
 * Renders as div element with role="tabpanel" and ARIA attributes
209
 * @param props - TabPanelProps configuration object
210
 * @returns JSX element rendering as div with role="tabpanel"
211
 */
212
const TabPanel: React.FunctionComponent<TabPanelProps>;
213

214
interface TabPanelProps extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
215
  /** CSS class name(s) for the panel */
216
  className?: string | string[] | { [name: string]: boolean };
217
  /** Force render even when not selected */
218
  forceRender?: boolean;
219
  /** CSS class for selected state */
220
  selectedClassName?: string;
221
}
222
```
223

224
**Usage Examples:**
225

226
```javascript
227
// Basic tab panels
228
<TabPanel>
229
  <h2>Welcome to our homepage</h2>
230
  <p>This is the main content area.</p>
231
</TabPanel>
232

233
<TabPanel>
234
  <h2>About Us</h2>
235
  <p>Learn more about our company.</p>
236
</TabPanel>
237

238
// Force render panel (keeps content in DOM when not selected)
239
<TabPanel forceRender={true}>
240
  <VideoPlayer autoPlay={false} />
241
</TabPanel>
242

243
// With custom styling
244
<TabPanel 
245
  className="custom-panel"
246
  selectedClassName="panel-active"
247
>
248
  <ComplexComponent />
249
</TabPanel>
250

251
// With conditional content
252
<TabPanel>
253
  {isLoading ? (
254
    <LoadingSpinner />
255
  ) : (
256
    <DataTable data={data} />
257
  )}
258
</TabPanel>
259
```
260

261
## Component Relationships
262

263
All four components must be used together in the correct hierarchy:
264

265
```javascript
266
<Tabs>              {/* Root container */}
267
  <TabList>          {/* Tab navigation */}
268
    <Tab>Tab 1</Tab> {/* Individual tabs */}
269
    <Tab>Tab 2</Tab>
270
  </TabList>
271
  <TabPanel>         {/* Content panels */}
272
    Content 1
273
  </TabPanel>
274
  <TabPanel>
275
    Content 2
276
  </TabPanel>
277
</Tabs>
278
```
279

280
## Static Properties
281

282
Each component includes a `tabsRole` static property for internal identification:
283

284
```typescript { .api }
285
Tabs.tabsRole = 'Tabs';
286
TabList.tabsRole = 'TabList';
287
Tab.tabsRole = 'Tab';
288
TabPanel.tabsRole = 'TabPanel';
289
```
290

291
These properties enable the library to validate component structure and ensure proper nesting.
292

293
## Testing Attributes
294

295
React Tabs automatically adds data attributes for testing and internal identification:
296

297
```typescript { .api }
298
/**
299
 * Data attributes added by the library
300
 */
301
interface DataAttributes {
302
  /** Added to the main Tabs container */
303
  'data-rttabs': boolean;
304
  /** Added to each Tab element */  
305
  'data-rttab': boolean;
306
}
307
```
308

309
**Testing Usage:**
310

311
```javascript  
312
// Jest/Testing Library selectors
313
const tabsContainer = screen.getByTestId('tabs-container');
314
// Or using data attributes
315
const tabsContainer = document.querySelector('[data-rttabs]');
316
const firstTab = document.querySelector('[data-rttab]');
317

318
// Cypress selectors
319
cy.get('[data-rttabs]').should('exist');
320
cy.get('[data-rttab]').first().click();
321
```