TabPanel

The content one tab shows.

import { TabPanel } from '@zitdevs/ui';

Examples

All 24Guides 8Templates 6

Every guide, template and tool, newest first.

Step-by-step guides for running IT in a growing company.

Policies and checklists to copy and adapt.

<TabPanel id="panel-guides" tabId="tab-guides" selected>
  <ResourceGrid kind="guide" />
</TabPanel>

Props

Prop	Type	Default	Notes
id	string	required	The tab’s panelId.
tabId	string	required	The id of the tab that names it.
selected	boolean	false	Starts visible. Set it on the panel of the selected tab.
children	ReactNode	—	Any content, server-rendered.
ref	Ref<HTMLDivElement>	—
className	string	—	Merged last with cn().
anything else	<div> attributes	—

Exported type: TabPanelProps.

Accessibility

• role="tabpanel", named by its tab through aria-labelledby.
• It is in the tab order (tabindex="0") and draws the kit’s focus ring, so a reader can reach content that has no control of its own. A hidden panel is out of the tab order and the accessibility tree.

Without JavaScript

Every panel is rendered from the start; only hidden flips, so all of them are in the document for crawlers and in-page search tools that read the source. Without an enhancer only the selected panel shows. It holds no state: after the first render the enhancer shows and hides it, never React.

Theming

None of its own: the content inside it sets its colours. The focus ring.