Tabs

Overview

Tabs are primarily used to switch between panels of content, therefore, if you are using more than three tabs, it may be more appropriate to consider an Accordion. Tabs are based on the Card component and have similar behaviour in terms of elevation. They can be used in place of a Card, or inside a Card as an inline component.

Usage

Tabs are a combination of components that are composed together. 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>

Content

Tab content should be related content that is separated into, at most, a few sections. Ideally, no more than 3-4 tabs should be used. Tabs should be checked on a small device to ensure content can comfortably fit.

Content should not flow from one tab to another or be used to compare content as only one panel of content can be viewed at a time.

Accessibility

Keyboard Navigation

Similar to Radio Field, 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.

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)