Tabs

Tabs organize content into panels that users switch between by clicking triggers. Each Tab child defines a trigger label and the content shown when that tab is active.

Basic Usage

Tabs let you split related content across panels that share the same space, showing one at a time. Wrap a set of Tab blocks in a Tabs container; each Tab takes a visible title and a value that identifies it, and the Tabs value sets which panel opens first. Use tabs to keep a busy screen — like a settings page with separate account and password sections — organized without forcing the user to scroll past everything at once.

Variants

The variant prop controls the visual style of the tab triggers. The default uses a pill-style background, while "line" uses an underline indicator.

Orientation

Set orientation="vertical" to stack the tab triggers in a column alongside the content.

State Tracking

Give Tabs a name to sync the active tab with client state. Other components can then read or change which tab is active — useful for building wizard flows or linking navigation between different parts of the UI.

Tabs with State

from prefab_ui.components import Button, Column, Row, Tab, Tabs, Text
from prefab_ui.actions import SetState

with Column(gap=4):
    with Tabs(name="activeTab", value="general"):
        with Tab("General", value="general"):
            Text("General settings here.")
        with Tab("Advanced", value="advanced"):
            Text("Advanced settings here.")

    with Row(gap=2):
        Button("Go to General", on_click=SetState("activeTab", "general"))
        Button("Go to Advanced", on_click=SetState("activeTab", "advanced"))

Change Actions

Tabs writes the selected tab’s value to its named state before running on_change. Your actions can read that updated key or use $event, which contains the selected tab’s value. An explicit SetState in the handler can choose a different active tab. This example records the selected section after each change:

API Reference

Tabs Parameters

str

default:"default"

Visual style: "default" (pill background) or "line" (underline indicator).

str

default:"horizontal"

Layout direction: "horizontal" (triggers above content) or "vertical" (triggers beside content).

str | None

default:"None"

Value of the initially active tab. If omitted, the first tab is active.

str | None

default:"None"

State key for tracking the active tab. Enables reading/writing the active tab from other components.

Action | list[Action] | None

default:"None"

Action(s) triggered when the active tab changes.

str | None

default:"None"

Additional Tailwind CSS classes.

Tab Parameters

str

required

Tab trigger label. Can be passed as a positional argument.

str | None

default:"None"

Unique value identifying this tab. Defaults to the title.

bool

default:"False"

Whether this tab is disabled.

Protocol Reference

Tabs

{
  "type": "Tabs",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "value?": "string",
  "variant?": "default | line | string",
  "orientation?": "horizontal | vertical",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}

Tab

{
  "type": "Tab",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "title": "string (required)",
  "value?": "string",
  "disabled?": false,
  "cssClass?": "string"
}

For the complete protocol schema, see Tabs, Tab.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Variants

Orientation

State Tracking

Change Actions

API Reference

Tabs Parameters

Tab Parameters

Protocol Reference

​Basic Usage

​Variants

​Orientation

​State Tracking

​Change Actions

​API Reference

Tabs Parameters

Tab Parameters

​Protocol Reference

Basic Usage

Variants

Orientation

State Tracking

Change Actions

API Reference

Protocol Reference