Tabs

Overview

Tabs are navigation elements at the top of the page, used to switch between different groups of related content on a page.

When to use:

  • Breaking up a page’s content into distinct chunks or tasks.
  • Navigating between groups of content that are related and at the same level of hierarchy.

Implementation

Edit the code below to see your changes live!

function Example() {
  const [activeTab, setActiveTab] = useState('tab1');

  const items = [
    { ariaControls: 'content1', id: 'tab1', title: 'Example 1' },
    { ariaControls: 'content2', id: 'tab2', title: 'Example 2' },
    { ariaControls: 'content3', id: 'tab3', title: 'Example 3' },
    { ariaControls: 'content4', id: 'tab4', title: 'Example 4', disabled: true },
  ];

  return (
    <>
      <Tabs
        activeTab={activeTab}
        aria-label="Example Tab Content"
        id="tab-example"
        items={items}
        onTabClick={setActiveTab}
      />
      <Box marginTop="large">
        {activeTab === 'tab1' && <Text id="content1">Content 1</Text>}
        {activeTab === 'tab2' && <Text id="content2">Content 2</Text>}
        {activeTab === 'tab3' && <Text id="content3">Content 3</Text>}
        {activeTab === 'tab4' && <Text id="content4">Content 4</Text>}
      </Box>
    </>
  );
}

Props

Prop name
Type
Default
Description
activeTabstring

Determines the active tab by tab id.

itemsTabItem[]

See TabItem for usage.

onTabClick(tabId: string) => void

Function that will get called when a tab is clicked.

Props ending with * are required

Do's and Don'ts

Do
Place Tabs with related content next to each other, and place in an order that is conducive to the user’s success in the experience.
If using the same Tabs for different pages, keep tab order consistent.
Make the tab label succinct and descriptive of the content within it.
Ensure Tabs relate to each other and organize the page’s content in a meaningful way.
Use Tabs to switch between related content.
Use the ariaControls prop to match your content with the TabItem that displays it.
Don't
Don’t use more than eight Tabs per page. If more than eight Tabs are needed, consider other types of navigation or content organization.
Don’t use more than 4 words to label each Tab.
Don’t use icons in tab labels.
Don’t use Tabs to filter content on a page, instead use PillTabs.