Tabs

Tabs are used to organize content by grouping similar information on the same page.

Import

Tabs: The wrapper around the tabs.
TabList: The list of tabs, can be above or below the TabPanels.
Tab: The tab name, supports a ReactNode
TabPanels: The list of tab panels
TabPanel: The content in one tab

Basic usage

First panel

<Tabs>
  <TabList className="mb-16">
    <Tab>Information</Tab>
    <Tab>Roles</Tab>
    <Tab>Settings & Policies</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>First panel</TabPanel>
    <TabPanel>Second panel</TabPanel>
    <TabPanel>Third panel</TabPanel>
  </TabPanels>
</Tabs>

Fitted

Use the isFitted prop on the TabList component to make the tabs fit their container.

First panel

<Tabs>
  <TabList isFitted className="mb-16">
    <Tab>Information</Tab>
    <Tab>Roles</Tab>
    <Tab>Settings & Policies</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>First panel</TabPanel>
    <TabPanel>Second panel</TabPanel>
    <TabPanel>Third panel</TabPanel>
  </TabPanels>
</Tabs>

Default tab index

Use the defaultTabIndex prop to make a tab initially active.

Third panel

<Tabs defaultTabIndex={2}>...</Tabs>

Customized

The Tab accepts any kind of content, it can be customized as needed.

First panel

<Tabs>
  <TabList className="mb-16">
    <Tab>Information</Tab>
    <Tab>
      Roles
      <Badge className="ml-8" variant="primary">
        3
      </Badge>
    </Tab>
    <Tab>
      <Icon
        className="mr-8"
        color="var(--color-content-warning-default)"
        name="warning"
      />
      Settings & Policies
    </Tab>
  </TabList>
</Tabs>

Controlled

A tab's state can be controlled. Make sure to include the tabIndex and onChange props.

Third panel

const Demo = () => {
  const [value, setValue] = useState(2);

  return (
    <>
      <input
        className="appearance-auto"
        type="range"
        min="0"
        max="2"
        step="1"
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
      />
      <Tabs tabIndex={value} onChange={setValue}>
        <TabList>
          <Tab>Tab One</Tab>
          <Tab>Tab Two</Tab>
          <Tab>Tab Three</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>First panel</TabPanel>
          <TabPanel>Second panel</TabPanel>
          <TabPanel>Third panel</TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
};