Skip to main content
Pages provide a multi-page layout where only the active page renders. Navigate between pages by setting client state — there’s no tab bar, so you control the navigation UI yourself with buttons, links, or any other component.

​
Basic Usage

The name prop connects the Pages component to client state. When the entry key changes (via SetState), the corresponding page renders. This makes Pages ideal for wizard flows, multi-step forms, or any layout where you want to swap entire sections without a server round-trip.

​
Step-by-Step Navigation

Pages pair naturally with SetState to build wizard flows. Each page’s button advances to the next step. Use as pages to capture the reference, then pass pages directly to SetState instead of hardcoding the state key:

​
Reading the Value

Use .rx to get a reactive reference to the active page’s value string. Since Pages has no built-in navigation, you provide your own — here a Select drives which page is shown: SetState accepts a stateful component directly — it extracts the state key automatically. So SetState(pages, EVENT) writes the Select’s chosen value into the pages’ state key, switching the visible page. EVENT is a reactive reference that resolves to the value from the triggering component.

​
API Reference

Pages Parameters

​
value
str | None
default:"None"
Value of the initially active page.
​
name
str | None
default:"None"
State key for tracking the active page. Other components can write to this key with SetState.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Page Parameters

​
title
str
required
Page identifier. Can be passed as a positional argument.
​
value
str | None
default:"None"
Unique value for this page. Defaults to the title.

​
Protocol Reference

Pages
{
  "type": "Pages",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "value?": "string",
  "cssClass?": "string"
}
Page
{
  "type": "Page",
  "children?": "[Component]",
  "let?": "object",
  "title": "string (required)",
  "value?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Pages, Page.