Tab Panel

Tab Panel is an accessible tab content panel built on MUI's Box and Typography. It renders children in a padded container with the correct role="tabpanel", id, and aria-labelledby for use with MUI Tabs or custom tab lists. The library also exports a11yProps to generate id and aria-controls for the corresponding tab buttons.

Use it with MUI's Tabs and tab buttons so each panel is correctly associated with its tab for accessibility and keyboard navigation.

Import

import { TabPanel, a11yProps } from '@js-smart/react-kit';

Basic usage

const [value, setValue] = useState('0');

<Tabs value={value} onChange={(_, v) => setValue(v)}>
  <Tab label="One" {...a11yProps(0)} />
  <Tab label="Two" {...a11yProps(1)} />
</Tabs>
<TabPanel value={value} index={0}>
  Content for tab one
</TabPanel>
<TabPanel value={value} index={1}>
  Content for tab two
</TabPanel>

With a11yProps

a11yProps(index) returns { id, 'aria-controls' } so the tab button and panel are linked:

<Tab label="Item" {...a11yProps(0)} />
// ...
<TabPanel index={0} value={value}>
  Item content
</TabPanel>

Accessibility

The panel has role="tabpanel", with id set to vertical-tabpanel- plus the panel index (e.g. vertical-tabpanel-0), and aria-labelledby set to vertical-tab- plus the index. Use a11yProps(index) on the corresponding Tab so the tab has the matching id (vertical-tab-0, etc.) and aria-controls pointing to the panel id (vertical-tabpanel-0, etc.).

Peer dependencies

TabPanel uses MUI's Box and Typography. Ensure your project has @mui/material installed (see Installation).

Props

Prop	Type	Default	Description
index	number	—	Required. Zero-based index of this panel; used for id and aria-labelledby.
value	string	—	Required. Current tab value (from parent Tabs state); the parent typically renders only the panel whose index matches the active tab.
children	ReactNode	—	Content rendered inside the panel.

a11yProps(index: number)

Returns { id: string, 'aria-controls': string } for the tab at the given index. Spread onto the corresponding Tab component.