Forma 36 - Tabs

Import

import { Tabs } from '@contentful/f36-components';
// or
import { Tabs } from '@contentful/f36-tabs';

Examples

Basic


function TabsBasicExample() {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsBasicExample() {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}

With divider

By default, Tabs has no divider, but you can add it by providing variant prop to the Tabs.List

With vertical divider:


function TabsWithVerticalDividerExample() {
  return (
    <Tabs>
      <Tabs.List variant="vertical-divider">
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsWithVerticalDividerExample() {
  return (
    <Tabs>
      <Tabs.List variant="vertical-divider">
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}

With horizontal divider:


function TabsWithHorizontalDividerExample() {
  return (
    <Tabs>
      <Tabs.List variant="horizontal-divider">
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsWithHorizontalDividerExample() {
  return (
    <Tabs>
      <Tabs.List variant="horizontal-divider">
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}

With default open tab


function TabsWithDefaultTabExample() {
  return (
    <Tabs defaultTab="first">
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsWithDefaultTabExample() {
  return (
    <Tabs defaultTab="first">
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}

With disabled tab


function TabsWithDefaultTabExample() {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third" isDisabled>
          Third (disabled)
        </Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsWithDefaultTabExample() {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third" isDisabled>
          Third (disabled)
        </Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">Content for the first tab</Tabs.Panel>
      <Tabs.Panel id="second">Content for the second tab</Tabs.Panel>
      <Tabs.Panel id="third">Content for the third tab</Tabs.Panel>
    </Tabs>
  );
}

Controlled Tabs

By default, Tabs is an uncontrolled component, but you can make it controlled by providing currentTab and onTabChange props.


function TabsControlledExample() {
  const [currentTab, setCurrentTab] = useState('first');

  return (
    <Tabs currentTab={currentTab} onTabChange={setCurrentTab}>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">content first tab</Tabs.Panel>
      <Tabs.Panel id="second">content second tab</Tabs.Panel>
      <Tabs.Panel id="third">content third tab</Tabs.Panel>
    </Tabs>
  );
}function TabsControlledExample() {
  const [currentTab, setCurrentTab] = useState('first');

  return (
    <Tabs currentTab={currentTab} onTabChange={setCurrentTab}>
      <Tabs.List>
        <Tabs.Tab panelId="first">First</Tabs.Tab>
        <Tabs.Tab panelId="second">Second</Tabs.Tab>
        <Tabs.Tab panelId="third">Third</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel id="first">content first tab</Tabs.Panel>
      <Tabs.Panel id="second">content second tab</Tabs.Panel>
      <Tabs.Panel id="third">content third tab</Tabs.Panel>
    </Tabs>
  );
}

Props (API reference)

Open in Storybook

Tabs

Name	Type	Default
children	ReactNode
className	string CSS class to be appended to the root element
currentTab	string
defaultTab	string
onTabChange	(tab: string) => void
testId	string A [data-test-id] attribute used for testing purposes

Tab

Name	Type	Default
children required	ReactNode
panelId required	string A unique id that associates the tab with a panel.
className	string CSS class to be appended to the root element
isDisabled	false true When true, prevents the user from interacting with the tab.
testId	string A [data-test-id] attribute used for testing purposes

TabPanel

Name	Type	Default
children required	ReactNode
id required	string
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes

TabList

Name	Type	Default
children	ReactNode
className	string CSS class to be appended to the root element
loop	false true When true, keyboard navigation will loop from last tab to first, and vice versa.
testId	string A [data-test-id] attribute used for testing purposes
variant	"default" "horizontal-divider" "vertical-divider" visual variant of TabList

Content guidelines

every Tab should have concise copy
all content within a Tab should be related to it's label
to ensure an optimal cognitive load for users, do not use more than six (6) Tabs at any given time

Import

Examples

Basic

With divider

With default open tab

With disabled tab

Controlled Tabs

Props (API reference)

Tabs

Name

Type

Default

Tab

Name

Type

Default

TabPanel

Name

Type

Default

TabList

Name

Type

Default

Content guidelines

Help improve this page