#TabPanelLayout

Source | Original component

A tab panel: an item of IndexLayout'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 swallows them so they never land 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.

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;

#API

Inherits all PanelLayout props, plus:

#See also

• The tab container (with the tabpanel wiring): IndexLayout