Skip to main content

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
Copy

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.

PropDefaultDescription
asdiv'div' | Component

Component to render as

tabsundefinedTab[]

Array of tabs

title:
| string
| { text?: string; iconStart?: React.ReactNode | { (props): JSX.Element } }
content: React.ReactNode;
shaperound'square' | 'round' | 'pill'

Shape of the tab

sizebase'xs' | 'sm' | 'base' | 'lg' | 'xl'

Size of the tab

weightnormal'clear' | 'normal' | 'light'

Weight of the tab

tabClassNamestring

Class name for the tab

tabActiveClassNamestring

Class name for the active tab

tabInactiveClassNamestring

Class name for the inactive tab

tabPanelClassNamestring

Class name for the tab panel

onChangeundefined(index: number) => void

Callback when the tab is changed

selectedIndexundefinednumber

Index of the selected tab

Tab.List

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

PropDefaultDescription
asdiv'div' | Component

Component to render as

shaperound'square' | 'round' | 'pill'

Shape of the tab

sizebase'xs' | 'sm' | 'base' | 'lg' | 'xl'

Size of the tab

weightnormal'clear' | 'normal' | 'light'

Weight of the tab

className``string

Class name for the tab list

tabClassNamestring

Class name for the tab

tabActiveClassNamestring

Class name for the active tab

tabInactiveClassNamestring

Class name for the inactive tab

Tab.ListItem

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

PropDefaultDescription
titlestring | { text?: string; iconStart?: React.ReactNode | { (props): JSX.Element } }

Title of the tab

asdiv'div' | Component

Component to render as

shaperound'square' | 'round' | 'pill'

Shape of the tab

sizebase'xs' | 'sm' | 'base' | 'lg' | 'xl'

Size of the tab

weightnormal'clear' | 'normal' | 'light'

Weight of the tab

classNamestring

Class name for the tab list item

tabClassNamestring

Class name for the tab

tabActiveClassNamestring

Class name for the active tab

tabInactiveClassNamestring

Class name for the inactive tab

Tab.Panels

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

PropDefaultDescription
classNamestring

Class name for the tab panels

Tab.Panel

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

PropDefaultDescription
tabPanelClassNamestring

Class name for the tab panel