Tabs

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

Import#

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/core";

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/core";

Tabs#

You can render any other elements you want inside of Tabs, but TabList should only render Tab elements, and TabPanels should only render TabPanel elements.

one!

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have tabs on the top or the bottom. In fact, you could have tabs on both the bottom and the top at the same time. You can have random elements inside as well.

Tab variants and color#

Tabs come in 6 different variants to style the tabs: line,enclosed, enclosed-colored, soft-rounded, solid-rounded

one!

<Tabs variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Manually Activated Tabs#

By default, Tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

The content of a TabPanel should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing Space or Enter.

one!

<Tabs isManual variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs isManual variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Tab sizes#

You can change the size of the tab by passing size prop. We support 3 sizes sm, md, lg

one!

<Tabs size="md" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs size="md" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Tab alignment#

You can change the alignment of the TabList by passing align prop. We support 3 sizes start, center, end.

one!

<Tabs align="end" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs align="end" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Fitted Tabs#

Stretch the tab list to fit the container by passing isFitted prop.

one!

<Tabs isFitted variant="enclosed">
  <TabList mb="1em">
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs isFitted variant="enclosed">
  <TabList mb="1em">
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Editable Example

Tabs onChange#

Calls back with the tab index whenever the user changes tabs, allowing your app to synchronize with it.

The Primary Colors

function Example() {
  const colors = ["red.200", "teal.200", "blue.200"];
  const [tabIndex, setTabIndex] = React.useState(0);
  const bg = colors[tabIndex];
  return (
    <Tabs onChange={index => setTabIndex(index)} color="white" bg={bg}>
      <TabList>
        <Tab>Red</Tab>
        <Tab>Teal</Tab>
        <Tab>Blue</Tab>
      </TabList>
      <TabPanels p="2rem">
        <TabPanel>The Primary Colors</TabPanel>
        <TabPanel>Are 1, 2, 3</TabPanel>
        <TabPanel>Red, yellow and blue.</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

function Example() {
  const colors = ["red.200", "teal.200", "blue.200"];
  const [tabIndex, setTabIndex] = React.useState(0);
  const bg = colors[tabIndex];
  return (
    <Tabs onChange={index => setTabIndex(index)} color="white" bg={bg}>
      <TabList>
        <Tab>Red</Tab>
        <Tab>Teal</Tab>
        <Tab>Blue</Tab>
      </TabList>
      <TabPanels p="2rem">
        <TabPanel>The Primary Colors</TabPanel>
        <TabPanel>Are 1, 2, 3</TabPanel>
        <TabPanel>Red, yellow and blue.</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Editable Example

Tabs defaultIndex#

Starts the tabs at a specific index.

<Tabs defaultIndex={1}>
  <TabPanels>
    <TabPanel>
      <Image
        size="200px"
        objectFit="cover"
        src="https://resizing.flixster.com/wTgvsiM8vNLhCcCH-6ovV8n5z5U=/300x300/v1.bjsyMDkxMzI5O2o7MTgyMDQ7MTIwMDsxMjAwOzkwMA"
      />
    </TabPanel>
    <TabPanel>
      <Image
        size="200px"
        objectFit="cover"
        src="https://vignette.wikia.nocookie.net/naruto/images/2/21/Sasuke_Part_1.png/revision/latest?cb=20170716092103"
      />
    </TabPanel>
  </TabPanels>
  <TabList>
    <Tab>Naruto</Tab>
    <Tab>Sasuke</Tab>
  </TabList>
</Tabs>

<Tabs defaultIndex={1}>
  <TabPanels>
    <TabPanel>
      <Image
        size="200px"
        objectFit="cover"
        src="https://resizing.flixster.com/wTgvsiM8vNLhCcCH-6ovV8n5z5U=/300x300/v1.bjsyMDkxMzI5O2o7MTgyMDQ7MTIwMDsxMjAwOzkwMA"
      />
    </TabPanel>
    <TabPanel>
      <Image
        size="200px"
        objectFit="cover"
        src="https://vignette.wikia.nocookie.net/naruto/images/2/21/Sasuke_Part_1.png/revision/latest?cb=20170716092103"
      />
    </TabPanel>
  </TabPanels>
  <TabList>
    <Tab>Naruto</Tab>
    <Tab>Sasuke</Tab>
  </TabList>
</Tabs>

Editable Example

Tabs Index#

Like form inputs, a tab's state can be controlled. Make sure to include an onChange as well, or else the tabs will not be interactive.

Click the tabs or pull the slider around

function ControlledExample() {
  const [tabIndex, setTabIndex] = React.useState(0);

  const handleSliderChange = event => {
    setTabIndex(parseInt(event.target.value, 10));
  };

  const handleTabsChange = index => {
    setTabIndex(index);
  };

  return (
    <Box>
      <input
        type="range"
        min="0"
        max="2"
        value={tabIndex}
        onChange={handleSliderChange}
      />

      <Tabs index={tabIndex} onChange={handleTabsChange}>
        <TabList>
          <Tab>One</Tab>
          <Tab>Two</Tab>
          <Tab>Three</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <p>Click the tabs or pull the slider around</p>
          </TabPanel>
          <TabPanel>
            <p>Yeah yeah. What's up?</p>
          </TabPanel>
          <TabPanel>
            <p>Oh, hello there.</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

function ControlledExample() {
  const [tabIndex, setTabIndex] = React.useState(0);
  const handleSliderChange = event => {
    setTabIndex(parseInt(event.target.value, 10));
  };
  const handleTabsChange = index => {
    setTabIndex(index);
  };
  return (
    <Box>
      <input
        type="range"
        min="0"
        max="2"
        value={tabIndex}
        onChange={handleSliderChange}
      />
      <Tabs index={tabIndex} onChange={handleTabsChange}>
        <TabList>
          <Tab>One</Tab>
          <Tab>Two</Tab>
          <Tab>Three</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <p>Click the tabs or pull the slider around</p>
          </TabPanel>
          <TabPanel>
            <p>Yeah yeah. What's up?</p>
          </TabPanel>
          <TabPanel>
            <p>Oh, hello there.</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

Editable Example

Tab isSelected#

Because TabList needs to know the order of the children, we use cloneElement to pass state internally. If you want to know if a tab is active, you can wrap it, and then inspect clone props passed in.

function CoolTabsExample() {
  const CoolTab = React.forwardRef((props, ref) => {
    // `isSelected` is passed to all children of `TabList`.
    return (
      <Tab ref={ref} isSelected={props.isSelected} {...props}>
        {props.isSelected ? "😎" : "😐"}
        {props.children}
      </Tab>
    );
  });

  return (
    <Tabs>
      <TabList>
        <CoolTab>One</CoolTab>
        <CoolTab>Two</CoolTab>
      </TabList>
      <TabPanels>
        <TabPanel>1</TabPanel>
        <TabPanel>2</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

function CoolTabsExample() {
  const CoolTab = React.forwardRef((props, ref) => {
    // `isSelected` is passed to all children of `TabList`.
    return (
      <Tab ref={ref} isSelected={props.isSelected} {...props}>
        {props.isSelected ? "😎" : "😐"}
        {props.children}
      </Tab>
    );
  });
  return (
    <Tabs>
      <TabList>
        <CoolTab>One</CoolTab>
        <CoolTab>Two</CoolTab>
      </TabList>
      <TabPanels>
        <TabPanel>1</TabPanel>
        <TabPanel>2</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Editable Example

Tab isDisabled#

When a Tab is disabled, it's skipped from the keyboard navigations and not clickable.

function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab isDisabled>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>1</TabPanel>
        <TabPanel>2</TabPanel>
        <TabPanel>3</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab isDisabled>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>1</TabPanel>
        <TabPanel>2</TabPanel>
        <TabPanel>3</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Editable Example

DataTabs#

If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.

Perhaps the greatest dish ever invented.

function Example() {
  // First, you create the component...
  function DataTabs({ data }) {
    return (
      <Tabs>
        <TabList>
          {data.map((tab, index) => (
            <Tab key={index}>{tab.label}</Tab>
          ))}
        </TabList>
        <TabPanels>
          {data.map((tab, index) => (
            <TabPanel p={4} key={index}>
              {tab.content}
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    );
  }

  // Next, you have an array of data...
  const tabData = [
    {
      label: "Nigerian Jollof",
      content: "Perhaps the greatest dish ever invented.",
    },
    {
      label: "Pounded Yam & Egusi",
      content:
        "Perhaps the surest dish ever invented but fills the stomach more than rice.",
    },
  ];

  // you can just pass it in:
  return <DataTabs data={tabData} />;
}

function Example() {
  // First, you create the component...
  function DataTabs({ data }) {
    return (
      <Tabs>
        <TabList>
          {data.map((tab, index) => (
            <Tab key={index}>{tab.label}</Tab>
          ))}
        </TabList>
        <TabPanels>
          {data.map((tab, index) => (
            <TabPanel p={4} key={index}>
              {tab.content}
            </TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    );
  }
  // Next, you have an array of data...
  const tabData = [
    {
      label: "Nigerian Jollof",
      content: "Perhaps the greatest dish ever invented.",
    },
    {
      label: "Pounded Yam & Egusi",
      content:
        "Perhaps the surest dish ever invented but fills the stomach more than rice.",
    },
  ];
  // you can just pass it in:
  return <DataTabs data={tabData} />;
}

Editable Example

Accessibility#

Keyboard#

Key	Action
`ArrowLeft`	Moves focus to the next tab
`ArrowUp`	Moves focus to the previous tab
`Tab`	When focus moves into the tab list, places focus on the active tab element
`Space` or `Enter`	Activates the tab if it was not activated automatically on focus
`Home`	Moves focus to the first tab
`End`	Moves focus to the last tab

ARIA roles#

Component	Aria	Usage
Tab	`role="tab"`	Indicates that it's a tab
	`aria-selected`	Set to `true` a tab is selected and all other Tabs have it set to `false`.
	`aria-controls`	Set to the `id` of its associated `TabPanel`
TabList	`id`	The `id` of the `TabPanel` that's referencd by its associated `Tab`
	`aria-orientation`	Set to vertical or horizontal based on the value of the `orientation` prop.
	`role="tablist"`	Indicates that it's a tablist
	`aria-labelledby`	Set to the `id` of the `Tab` that labels the `TabPanel`.

Proudly made in 🇳🇬

Released under the MIT License.

Tabs

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Tabs#

Tab variants and color#

Manually Activated Tabs#

Tab sizes#

Tab alignment#

Fitted Tabs#

Tabs onChange#

Tabs defaultIndex#

Tabs Index#

Tab isSelected#

Tab isDisabled#

DataTabs#

Accessibility#

Keyboard#

ARIA roles#

Import#