Tabs

Overview

When to use

• To organise different but related content
• To allow users to navigate a topic, entity or task without leaving the page

When not to use

• To indicate progress
• When users need to compare the information that will be split between tabs
• When you have need so many sections that tab labels can't horizontally fit on the page - consider an alternative way to organise this content

Anatomy

1. Selected tab
2. Unselected tabs
3. Tab label
4. Tab content

Basic usage

Tabs are a combination of components that are composed together. Tabs are based on the Card component and have similar behaviour in terms of elevation. Linking the tabs to panels is taken care of by the Tabs component.

Edit live code
<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>
<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>

Keyboard navigation

Tabs can be navigated with the left and right arrow keys (opens in new window) .

This will select a new tab and change the content to the corresponding panel. The active tab will be the only tabbable element, so the user can easily tab to other elements on the page.

Content

Writing tab labels

Each tab requires a tab label. A well-written tab label should:

• Be only 1 or 2 words, which is easier to scan
• Be clear and specific
• Be obviously related to the content it represents
• Use sentence case, except when using proper nouns (e.g. Direct Debit)

Don't:

Edit live code
<Tabs>
  <TabList>
    <Tab>Customer Billing Periods</Tab>
    <Tab>My Direct Debit</Tab>
    <Tab>Other</Tab>
  </TabList>
</Tabs>
<Tabs>
  <TabList>
    <Tab>Customer Billing Periods</Tab>
    <Tab>My Direct Debit</Tab>
    <Tab>Other</Tab>
  </TabList>
</Tabs>

Do:

Edit live code
<Tabs>
  <TabList>
    <Tab>Billing periods</Tab>
    <Tab>Direct Debit</Tab>
    <Tab>Supplies</Tab>
    <Tab>Related accounts</Tab>
  </TabList>
</Tabs>
<Tabs>
  <TabList>
    <Tab>Billing periods</Tab>
    <Tab>Direct Debit</Tab>
    <Tab>Supplies</Tab>
    <Tab>Related accounts</Tab>
  </TabList>
</Tabs>

Additional content in tab labels

Tabs don't currently support additional content beyond tab labels, such as secondary labels or badges.

Where possible, avoid additional content where you can, as this can make tabs harder to scan. If you cannot avoid including additional content, aim to follow these guidelines:

• Do not add interactive elements to tab labels, such as buttons
• Do not add badges to more than one tab label, as this can make it less clear which tab is selected
• Do not add icons to tabs
• When tab labels include multiple pieces of information, organise by type, then identifier, then status. For instance:

Edit live code
<Tabs>
  <TabList>
    <Tab>
      Account<br />
      123456789<br />
      <Badge variant="success">Active</Badge>
    </Tab>
    <Tab>
      Account<br />
      234567890<br />
      <Badge>Inactive</Badge>
    </Tab>
  </TabList>
</Tabs>
<Tabs>
  <TabList>
    <Tab>
      Account<br />
      123456789<br />
      <Badge variant="success">Active</Badge>
    </Tab>
    <Tab>
      Account<br />
      234567890<br />
      <Badge>Inactive</Badge>
    </Tab>
  </TabList>
</Tabs>

Some of these things may be officially supported in future.

Variations

Default selected

You can set the default selected tab with the defaultSelected prop.

Edit live code
<Tabs defaultSelected={1}>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>
<Tabs defaultSelected={1}>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>

Controlled

Tabs manage their own state by default, but they can also be manually controlled using value and onSelected.

Edit live code
() => {
  const [value, setValue] = useState(2);

  return (
    <Stack spaceBetween={4}>
      <Tabs value={value} onSelected={setValue}>
        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
          <Tab>Tab3</Tab>
        </TabList>
        <TabPanel>
          <P>Tab 1 Content</P>
        </TabPanel>
        <TabPanel>
          <P>Tab 2 Content</P>
        </TabPanel>
        <TabPanel>
          <P>Tab 3 Content</P>
        </TabPanel>
      </Tabs>
      <PrimaryCTAButton onClick={() => setValue(0)}>First tab</PrimaryCTAButton>
    </Stack>
  );
}
() => {
  const [value, setValue] = useState(2);

  return (
    <Stack spaceBetween={4}>
      <Tabs value={value} onSelected={setValue}>
        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
          <Tab>Tab3</Tab>
        </TabList>
        <TabPanel>
          <P>Tab 1 Content</P>
        </TabPanel>
        <TabPanel>
          <P>Tab 2 Content</P>
        </TabPanel>
        <TabPanel>
          <P>Tab 3 Content</P>
        </TabPanel>
      </Tabs>
      <PrimaryCTAButton onClick={() => setValue(0)}>First tab</PrimaryCTAButton>
    </Stack>
  );
}

Inline

Like Cards, tabs that are placed inside of a raised component can be flattened by using adding the inline property.

Edit live code
<Tabs inline>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>
<Tabs inline>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>
    <P>Tab 1 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 2 Content</P>
  </TabPanel>
  <TabPanel>
    <P>Tab 3 Content</P>
  </TabPanel>
</Tabs>

Properties

Tabs

TabList

Tab

TabPanel

Related

• Card
• Tabbed Interfaces (opens in new window)