Basic example
Tabs provides a set of composable tab components. Place a set of Tab components within a TabList and a set of corresponding TabPanel components within TabPanels.
Editable example
<Tabs>
<TabList aria-label="Style options">
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
<Tab>CSS</Tab>
</TabList>
<TabPanels>
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
<TabPanel>CSS content</TabPanel>
</TabPanels>
</Tabs>
Best practices
- Avoid using tabs for disparate content. A set of tabs should relate to each other somehow and not be an unpredictably unrelated series of items.
- Use tabs to split long or overwhelming content into logically related chunks
- Use short single word labels
- Use between 2—8 tabs
Initial tab
By default, the first tab will initially be selected. If you need to specify another tab, use the initialIndex prop on Tabs.
Editable example
<Tabs initialIndex={2}>
<TabList aria-label="Initial index example">
<Tab>First tab</Tab>
<Tab>Second tab</Tab>
<Tab>Third tab</Tab>
</TabList>
<TabPanels>
<TabPanel>First tab content</TabPanel>
<TabPanel>Second tab content</TabPanel>
<TabPanel>Third tab content is selected initially</TabPanel>
</TabPanels>
</Tabs>
Alignment
Specify the horizontal alignment tabs within the TabList using the align prop. Choose an alignment that conforms to the alignment of other elements in the same context. For example, a page with a center aligned title and tabs underneath should center align the tabs.
Editable example
<Card>
<div className="space-inset-m">
<Tabs>
<TabList aria-label="Style options" align={TabListAlign.Start}>
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
</TabList>
<TabPanels>
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
</TabPanels>
</Tabs>
</div>
</Card>
<Card>
<div className="space-inset-m">
<Tabs>
<TabList aria-label="Style options" align={TabListAlign.Center}>
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
</TabList>
<TabPanels>
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
</TabPanels>
</Tabs>
</div>
</Card>
<Card>
<div className="space-inset-m">
<Tabs>
<TabList aria-label="Style options" align={TabListAlign.End}>
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
</TabList>
<TabPanels>
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
</TabPanels>
</Tabs>
</div>
</Card>
Bordered list
Use the isBordered prop on TabList to render a border between the list of tabs and the TabPanels.
If you're using the tabs within a panel or card, you'll also want to add some padding to the TabList and TabPanels. @space-s on the list and @space-m on the panels allows the Tab label to align with the panel content.
Editable example
<Card>
<style>
{`
.example-tablist {
padding: var(--space-s);
padding-block-end: 0;
}
.example-tabpanels {
padding: var(--space-m);
padding-block-start: 0;
}
`}
</style>
<Tabs>
<TabList aria-label="Style options" isBordered className="example-tablist">
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
<Tab>CSS</Tab>
</TabList>
<TabPanels className="example-tabpanels">
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
<TabPanel>CSS content</TabPanel>
</TabPanels>
</Tabs>
</Card>
Controlled
Tabs can be externally controlled using the selectedIndex and onChange props.
Editable example
() => {
const [selectedIndex, setSelectedIndex] = React.useState(0);
return (
<>
<div style={{ display: "flex", gap: "var(--space-m)" }}>
<Button type={ButtonType.Secondary} onClick={() => setSelectedIndex(0)}>First</Button>
<Button type={ButtonType.Secondary} onClick={() => setSelectedIndex(1)}>Second</Button>
<Button type={ButtonType.Secondary} onClick={() => setSelectedIndex(2)}>Third</Button>
</div>
<Tabs selectedIndex={selectedIndex} onChange={setSelectedIndex}>
<TabList aria-label="Style options">
<Tab>Block</Tab>
<Tab>Text</Tab>
<Tab>Animate</Tab>
</TabList>
<TabPanels>
<TabPanel>Block content</TabPanel>
<TabPanel>Text content</TabPanel>
<TabPanel>Animate content</TabPanel>
</TabPanels>
</Tabs>
</>
);
}
Accessibility
- Always provide an
aria-label on the TabList component that describes what the set of tabs is for e.g. "Style options" for the tabs within the block styles popover. Tabs automatically handles focus management and keyboard interactions. The TabList makes use of a roving tabindex, so only the selected tab is focused when tabbed to, and pressing the arrow keys moves between tabs.