Tabs

Horizontal navigation pattern for switching between related views

The Tabs component provides a way to organize content into multiple sections that can be switched between.

Tabs are used to organize related content into distinct sections, allowing users to switch between different views without navigating away from the page.

  • Horizontal navigation
  • Keyboard navigation support
  • Accessible by default
  • Support for disabled states
example.tsx
<Tabs>
    <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
    </TabList>
    <TabPanels>
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
    </TabPanels>
</Tabs>
  • Keep tab labels concise
  • Limit the number of tabs to avoid horizontal scrolling
  • Use tabs for related content that doesn't need to be viewed simultaneously
  • Provide clear visual indication of the active tab