> 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.

# PageLayout

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

A page panel: an item of [StackLayout](/ooui-react/en/components/stack-layout/index.md)'s `options` array. You rarely render it directly — put it into StackLayout's `options` instead.

## Standalone use

Standalone, the active state is declared via `active`; without `active` it derives from `hidden` (not hidden = active) and outputs the `oo-ui-pageLayout-active` class. `label` / `value` are fields carried along with the page-set object — the component swallows them so they never land as DOM attributes.

```tsx preview
import { PageLayout, StackLayout } from "ooui-react";

function App() {
  return (
    <StackLayout
      value="a"
      options={[
        { value: "a", label: "First page", padded: true, children: "First page content" },
        { value: "b", label: "Second page", padded: true, children: "Second page content" },
      ]}
    />
  );
}

export default App;
```

## API

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

| Prop              | Description                                                                              | Type                             | Default               |
| ----------------- | ---------------------------------------------------------------------------------------- | -------------------------------- | --------------------- |
| `active`          | Whether this is the active page; without it, derived from `hidden` (not hidden = active) | `boolean`                        | derived from `hidden` |
| `scrollable`      | Whether scrollable (pages scroll by default)                                             | `boolean`                        | `true`                |
| `label` / `value` | Carried with the page-set object, swallowed by the component                             | `ReactNode` / `string \| number` | —                     |

## See also

- The paged container: [StackLayout](/ooui-react/en/components/stack-layout/index.md)