TabPanels
Use tab panels for tabs with panel navigation.
- Draft
- Not reviewed for accessibility
import {TabPanels} from '@primer/react/drafts'
Attention: Make sure to properly label your TabPanels with an aria-label to provide context about the subject of your TabPanels.
TabPanels.Tab elements are wired up to their TabPanels.Panel elements based on the index order that they exist in the document.
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Used to set the | |
| aria-labelledby | string | Used to set the | |
| children | React.ReactNode | The content of the component, can contain Tabs, Panels but also content before and after Tabs and after the Panels. | |
| id | string | The id of the tab container, used to generate child ids. | |
| defaultTabIndex | number | The 0-based index of the tab that is selected by default when the component is loaded. | |
| selectedTabIndex | number | The 0-based index of the tab that is selected. | |
| onChange | function | Callback fired when the tab container changes (bubbles, cancelable): fired on | |
| onChanged | function | Callback fired when the tab container changes (bubbles): fired on | |
| sx | SystemStyleObject |
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content of the panel. | |
| sx | SystemStyleObject |