> For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/en/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/en/llms-full.txt.

# TabPanelLayout

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/layouts/TabPanelLayout) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.TabPanelLayout.html "OO.ui.TabPanelLayout")

A tab panel: an item of [IndexLayout](https://ooui-react.pages.dev/en/components/index-layout/index.md)'s `options` array, with `role="tabpanel"` on the root. You rarely render it directly.

## Standalone use

`active` declares the active state (outputs the `oo-ui-tabPanelLayout-active` class). `label` / `value` / `disabled` are fields carried along with the tab-set object — the component consumes them, so they are never written as DOM attributes. The panel defaults to `expanded` (fills its parent via absolute positioning), so when placed on its own it needs a positioned, sized parent.

```tsx preview
import { IndexLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 180 }}>
      <IndexLayout
        defaultValue="general"
        options={[
          { value: "general", label: "General", padded: true, children: "General settings" },
          { value: "advanced", label: "Advanced", padded: true, children: "Advanced settings" },
        ]}
      />
    </div>
  );
}

export default App;
```

Rendered without an IndexLayout, the active state is declared via `active` (the root emits the `oo-ui-tabPanelLayout-active` class; panels default to `expanded`, filling a positioned parent — pass `expanded={false}` to place them statically):

```tsx preview
import { TabPanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <TabPanelLayout active padded expanded={false}>
        General panel: declared with active, the root emits the oo-ui-tabPanelLayout-active class
      </TabPanelLayout>
      <TabPanelLayout padded expanded={false} hidden>
        Advanced panel: fully hidden while hidden
      </TabPanelLayout>
    </div>
  );
}

export default App;
```

## API

Inherits all [PanelLayout](https://ooui-react.pages.dev/en/components/panel-layout/index.md) props, plus:

| Prop                           | Description                                                | Type                                         | Default |
| ------------------------------ | ---------------------------------------------------------- | -------------------------------------------- | ------- |
| `active`                       | Whether this is the active panel                           | `boolean`                                    | `false` |
| `scrollable`                   | Whether scrollable (panels scroll by default)              | `boolean`                                    | `true`  |
| `label` / `value` / `disabled` | Carried with the tab-set object, consumed by the component | `ReactNode` / `string \| number` / `boolean` | —       |

## See also

- The tab container (with the tabpanel association): [IndexLayout](https://ooui-react.pages.dev/en/components/index-layout/index.md)