Tabs are used to organize content by grouping similar information on the same page.
View source code
Tabs: The wrapper around the tabs.TabList: The list of tabs, can be above or below the TabPanels.Tab: The tab name, supports a ReactNodeTabPanels: The list of tab panelsTabPanel: The content in one tab<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>
Use the isFitted prop on the TabList component to make the tabs fit their container.
<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>
Use the defaultTabIndex prop to make a tab initially active.
<Tabs defaultTabIndex={2}>...</Tabs>
The Tab accepts any kind of content, it can be customized as needed.
<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(--grapes-color-content-warning-default)"
name="warning"
/>
Settings & Policies
</Tab>
</TabList>
</Tabs>
A tab's state can be controlled. Make sure to include the tabIndex and onChange props.
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>
</>
);
};