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

# 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](https://ooui-react.pages.dev/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 takes them but never writes them as DOM attributes.

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

Rendered without a StackLayout, the active state is declared via `active` / `hidden` (panels default to `expanded`, filling a positioned parent; pass `expanded={false}` to place them statically):

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

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <PageLayout active padded expanded={false}>
        Active page: declared with active, the root emits the oo-ui-pageLayout-active class
      </PageLayout>
      <PageLayout padded expanded={false} hidden>
        Hidden page: hidden derives to inactive
      </PageLayout>
    </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 page; without it, derived from `hidden` (not hidden = active) — in continuous mode all pages are visible and the derivation no longer applies, so pass it explicitly | `boolean`                        | derived from `hidden` |
| `scrollable`      | Whether scrollable (pages scroll by default)                                                                                                                                                    | `boolean`                        | `true`                |
| `label` / `value` | Carried with the page-set object, taken by the component but never written as DOM attributes                                                                                                    | `ReactNode` / `string \| number` | —                     |

## See also

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