Tabs

Tabs organize content into separate views. Use Tabs, TabList, Tab, and TabPanel together.

Open in Storybook

Import

import { Tabs, TabList, Tab, TabPanel } from "@tosui/react";

Basic usage

Preview

Code

<Tabs>
  <TabList>
    <Tab index={0}>Account</Tab>
    <Tab index={1}>Password</Tab>
    <Tab index={2}>Notifications</Tab>
  </TabList>
  <TabPanel index={0}>
    <Box>Account settings content</Box>
  </TabPanel>
  <TabPanel index={1}>
    <Box>Password settings content</Box>
  </TabPanel>
  <TabPanel index={2}>
    <Box>Notification settings content</Box>
  </TabPanel>
</Tabs>

Default tab

Use defaultIndex to set the initial active tab.

<Tabs defaultIndex={1}>
  <TabList>
    <Tab index={0}>First</Tab>
    <Tab index={1}>Second (default)</Tab>
    <Tab index={2}>Third</Tab>
  </TabList>
  <TabPanel index={0}>First panel</TabPanel>
  <TabPanel index={1}>Second panel</TabPanel>
  <TabPanel index={2}>Third panel</TabPanel>
</Tabs>

Controlled mode

Use index and onChange for controlled mode.

function ControlledTabs() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <Tabs index={activeIndex} onChange={setActiveIndex}>
      <TabList>
        <Tab index={0}>Tab 1</Tab>
        <Tab index={1}>Tab 2</Tab>
        <Tab index={2}>Tab 3</Tab>
      </TabList>
      <TabPanel index={0}>Panel 1</TabPanel>
      <TabPanel index={1}>Panel 2</TabPanel>
      <TabPanel index={2}>Panel 3</TabPanel>
    </Tabs>
  );
}

Disabled tabs

Active panel content

<Tabs>
  <TabList>
    <Tab index={0}>Active</Tab>
    <Tab index={1} disabled>Disabled</Tab>
    <Tab index={2}>Another</Tab>
  </TabList>
  <TabPanel index={0}>Active panel content</TabPanel>
  <TabPanel index={1}>Disabled panel content</TabPanel>
  <TabPanel index={2}>Another panel content</TabPanel>
</Tabs>

Variants

The variant prop controls the tab style. Default is "line".

// Line variant (default)
<Tabs variant="line">
  <TabList>...</TabList>
  ...
</Tabs>

// Enclosed variant
<Tabs variant="enclosed">
  <TabList>...</TabList>
  ...
</Tabs>

Item indexes

Tab and TabPanel each use index 0 by default. Assign matching indexes when the component has more than one tab.

Tabs does not assign item indexes and does not export a TabPanels wrapper.

Props reference

Tabs

Prop	Type	Default	Description
defaultIndex	number	0	Initial active tab (uncontrolled)
index	number	-	Active tab index (controlled)
onChange	(index: number) => void	-	Tab change callback
variant	"line" | "enclosed"	"line"	Visual variant
className	string	-	Additional CSS class
children	ReactNode	-	Tab list and panels

TabList

Prop	Type	Default	Description
className	string	-	Additional CSS class
children	ReactNode	-	Tab buttons

Tab

Prop	Type	Default	Description
index	number	0	Tab index
disabled	boolean	false	Disable the tab
className	string	-	Additional CSS class
children	ReactNode	-	Tab label

TabPanel

Prop	Type	Default	Description
index	number	0	Panel index
className	string	-	Additional CSS class
children	ReactNode	-	Panel content

Accessibility

• TabList, Tab, and TabPanel use the corresponding ARIA roles.
• aria-selected identifies the active tab.
• aria-disabled identifies a disabled tab.
• Only the active panel renders.
• Tabs does not currently add arrow-key navigation or associate tabs and panels with IDs.

TypeScript

import { Tabs, TabList, Tab, TabPanel, type TabsVariant, type TabsProps, type TabListProps, type TabProps, type TabPanelProps } from "@tosui/react";