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

# IndexLayout

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

An index layout: a [tab select](/ooui-react/en/components/tab-select/index.md) on top and a stack of [tab panels](/ooui-react/en/components/tab-panel-layout/index.md) below. Suits settings pages — "top tabs + chunked content"; for the side-outline variant see [BookletLayout](/ooui-react/en/components/booklet-layout/index.md).

## Basic usage

An `options` item is `{ value, label, children }` plus the [TabPanelLayout](/ooui-react/en/components/tab-panel-layout/index.md) 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.

```tsx preview
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;
```

:::note Form premise
In the `expanded` form (on by default) the layout fills its parent via absolute positioning, so the parent must be positioned and sized (the demo wrapper above exists for exactly that). The `expanded={false}` static form works only for [MenuLayout](/ooui-react/en/components/menu-layout/index.md)'s own flow content — the panel stacks of this component and BookletLayout are absolutely positioned panels with no content height in static mode, so don't use it here.
:::

## 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](/ooui-react/en/components/menu-layout/index.md) props (except `menu` / `menuPosition` / `children`), plus:

| Prop                | Description                                                                                                                    | Type                              | Default |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ------- |
| `options`           | The tab set: `value`, `label`, `disabled` plus [TabPanelLayout](/ooui-react/en/components/tab-panel-layout/index.md) fields    | `IndexLayoutTabProps[]`           | —       |
| `value`             | Current active tab (controlled; passing it enables controlled mode)                                                            | `string \| number`                | —       |
| `defaultValue`      | Initial active tab for uncontrolled use                                                                                        | `string \| number`                | —       |
| `onChange`          | Active-tab change callback                                                                                                     | `ChangeHandler<string \| number>` | —       |
| `framed`            | Whether the tabs are framed                                                                                                    | `boolean`                         | `true`  |
| `continuous`        | Whether all panels show                                                                                                        | `boolean`                         | `false` |
| `autoFocus`         | Focus the panel's first focusable element after switching                                                                      | `boolean`                         | `true`  |
| `openMatchedPanels` | Hide inactive panels with `hidden="until-found"` and switch tabs when the browser search matches (disabled under `continuous`) | `boolean`                         | `true`  |

## See also

- The fields of a single tab panel: [TabPanelLayout](/ooui-react/en/components/tab-panel-layout/index.md)
- The side-outline variant: [BookletLayout](/ooui-react/en/components/booklet-layout/index.md)
- The `hidden="until-found"` three states: [Layout](/ooui-react/en/components/layout/index.md)