Tab

Tabs are used to organize content into different sections. They are useful when you have a lot of content and need to organize it into different sections.

Basic example

main.jsx

data.tsx

import { Tab } from '@fluid-design/fluid-ui';
import { data } from './data';
function Example() {
  return <Tab tabs={tabs} />;
}

Use as component

If you want to use the tab component as a component, you can use the as prop.

Component

import { Tab } from '@fluid-design/fluid-ui';
function Example() {
  return (
    <Tab>
      <Tab.List className='w-full'>
        <Tab.ListItem>Tab 1</Tab.ListItem>
        <Tab.ListItem>Tab 2</Tab.ListItem>
        <Tab.ListItem>Tab 3</Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>
          <Content title='Tab 1' />
        </Tab.Panel>
        <Tab.Panel>
          <Content title='Tab 2' />
        </Tab.Panel>
        <Tab.Panel>
          <Content title='Tab 3' />
        </Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}

Programmatically activate tab

You can programmatically activate a tab by using the selectedIndex prop. With this prop, you can control which tab is active. It's also possible to use the onChange prop to get the index of the selected tab.

Auto change tab

import { Tab } from '@fluid-design/fluid-ui';
import { useEffect, useState } from 'react';
function Example() {
  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveTabIndex((prev) => {
        if (prev === 2) {
          return 0;
        }
        return prev + 1;
      });
    }, 3800);
    return () => clearInterval(interval);
  }, []);
  return (
      <Tab
        onChange={setActiveTabIndex as any}
        selectedIndex={activeTabIndex as any}
        tabs={tabs}
        className='w-full'
      />
  );
}

Tab styles

You can customize the tab variant by using the shape, size and weight props.

<Tab
  shape='square' // "square" | "round" | "pill"
  size='xl' // "xs" | "sm" | "base" | "lg" | "xl"
  weight='light' // "clear" | "normal" | "light"
/>

Component API

Tab

The Tab component is the wrapper component for the tab component.

Prop	Default	Description
`as`	`div`	`'div' \| Component` Component to render as
`tabs`	`undefined`	`Tab[]` Array of tabs title: \| string \| { text?: string; iconStart?: React.ReactNode \| { (props): JSX.Element } } content: React.ReactNode;
`shape`	`round`	`'square' \| 'round' \| 'pill'` Shape of the tab
`size`	`base`	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` Size of the tab
`weight`	`normal`	`'clear' \| 'normal' \| 'light'` Weight of the tab
`tabClassName`		`string` Class name for the tab
`tabActiveClassName`		`string` Class name for the active tab
`tabInactiveClassName`		`string` Class name for the inactive tab
`tabPanelClassName`		`string` Class name for the tab panel
`onChange`	`undefined`	`(index: number) => void` Callback when the tab is changed
`selectedIndex`	`undefined`	`number` Index of the selected tab

Tab.List

The Tab.List component is the wrapper component for the tab list.

Prop	Default	Description
`as`	`div`	`'div' \| Component` Component to render as
`shape`	`round`	`'square' \| 'round' \| 'pill'` Shape of the tab
`size`	`base`	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` Size of the tab
`weight`	`normal`	`'clear' \| 'normal' \| 'light'` Weight of the tab
`className`	``	`string` Class name for the tab list
`tabClassName`		`string` Class name for the tab
`tabActiveClassName`		`string` Class name for the active tab
`tabInactiveClassName`		`string` Class name for the inactive tab

Tab.ListItem

The Tab.ListItem component is the wrapper component for the tab list item.

Prop	Default	Description
`title`		`string \| { text?: string; iconStart?: React.ReactNode \| { (props): JSX.Element } }` Title of the tab
`as`	`div`	`'div' \| Component` Component to render as
`shape`	`round`	`'square' \| 'round' \| 'pill'` Shape of the tab
`size`	`base`	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'` Size of the tab
`weight`	`normal`	`'clear' \| 'normal' \| 'light'` Weight of the tab
`className`		`string` Class name for the tab list item
`tabClassName`		`string` Class name for the tab
`tabActiveClassName`		`string` Class name for the active tab
`tabInactiveClassName`		`string` Class name for the inactive tab

Tab.Panels

The Tab.Panels component is the wrapper component for the tab panel.

Prop	Default	Description
`className`		`string` Class name for the tab panels

Tab.Panel

The Tab.Panel component is the wrapper component for the tab panel.

Prop	Default	Description
`tabPanelClassName`		`string` Class name for the tab panel