title: Tabs storybookPath: page-layout-tabs--default isExperimentalPackage: true

Tabs are a set of layered sections of content (known as tab panels) that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along the top edge of the currently displayed panel.

Example

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Default Index

By default, users will be shown the first tab. This can be overridden by providing a defaultIndex prop. You can also have no tabs active by default by providing a defaultIndex of -1.

<Tabs defaultIndex={1}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab (default)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from second panel (this should be selected by default)"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Disabled tabs

Individual tabs can be be disabled by providing them with a disabled prop.

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab disabled>Third tab (disabled)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from third panel. You should not be able to see me!"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Manual Activation

By default, when a tab has focus, users can cycle through the enabled tabs using the arrow keys. If activationMode is set to "manual", users can activate a tab by pressing the Enter or Space key when the tab you want to view has focus.

It is very important for usability that functionality of components behaves in a consistent manor. It is therefore recommended that you do not use the manual activation mode unless you absolutely need it.

<Tabs activationMode="manual">
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Props

Tabs

TabList

Tab

TabPanels

TabPanel