#IndexLayout

Source | Original component

An index layout: a tab select on top and a stack of tab panels below. Suits settings pages — "top tabs + chunked content"; for the side-outline variant see BookletLayout.

#Basic usage

An options item is { value, label, children } plus the TabPanelLayout panel fields (with disabled to disable a tab); the active tab rides the value / defaultValue / onChange channels. Tabs and panels are wired with aria-controls / aria-labelledby automatically.

import { useState } from "react";
import { IndexLayout } from "ooui-react";

function App() {
  const [tab, setTab] = useState<string | number>("general");

  return (
    <div style={{ position: "relative", height: 180 }}>
      <IndexLayout
        framed
        value={tab}
        onChange={setTab}
        options={[
          { value: "general", label: "General", padded: true, children: "General settings" },
          { value: "appearance", label: "Appearance", padded: true, children: "Appearance settings" },
          { value: "advanced", label: "Advanced", padded: true, disabled: true, children: "Advanced settings" },
        ]}
      />
    </div>
  );
}

export default App;

#Browser-search linkage

openMatchedPanels (default true) hides inactive panels with hidden="until-found": when the browser's in-page search (Ctrl+F) matches content inside a hidden panel, the corresponding tab is activated automatically. Under continuous all panels show at once and openMatchedPanels is disabled — panels are no longer hidden with until-found and the browser-search linkage stops. autoFocus (default true) focuses the panel's first focusable element after a switch (suppressed in the mobile form).

When the active tab is removed, the first selectable (non-disabled) tab is auto-selected.

#API

Inherits all MenuLayout props (except menu / menuPosition / children), plus:

#See also

• The fields of a single tab panel: TabPanelLayout
• The side-outline variant: BookletLayout
• The hidden="until-found" three states: Layout