Skip to content
Primer Design System/React

Primer Design System

Site navigation

On this page

TabPanels

Use tab panels for tabs with panel navigation.
  • Draft
  • Not reviewed for accessibility
On this page
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.

Examples

Props

TabPanels

NameTypeDefaultDescription
aria-label
string

Used to set the aria-label on the role="tablist" element. Either aria-label or aria-labelledby must be provided.

aria-labelledby
string

Used to set the aria-labelledby on the role="tablist" element. Either aria-label or aria-labelledby must be provided.

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 <tab-container> before a new tab is selected and visibility is updated. event.tab is the tab that will be focused and tab.panel is the panel that will be shown if the event isn't cancelled.

onChanged
function

Callback fired when the tab container changes (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.tab is the tab that is now active (and will be focused right after this event) and event.panel is the newly visible tab panel.

sx
SystemStyleObject

TabPanels.Tab

NameTypeDefaultDescription
sx
SystemStyleObject

TabPanels.Panel

NameTypeDefaultDescription
children
React.ReactNode

The content of the panel.

sx
SystemStyleObject