Tabs

Organize related content into panels.

TabsExamples.tsrx
import { Tabs, TabList, Tab, TabPanel, Input } from "@octaneui/core";

export function TabsExamples() @{
  <Tabs defaultValue="profile">
    <TabList aria-label="Account settings">
      <Tab value="profile">Profile</Tab>
      <Tab value="security">Security</Tab>
      <Tab value="billing" disabled>Billing</Tab>
    </TabList>
    <TabPanel value="profile">
      <Input aria-label="Display name" placeholder="Display name" />
    </TabPanel>
    <TabPanel value="security">
      Manage your password and sign-in preferences.
    </TabPanel>
    <TabPanel value="billing">Manage your subscription.</TabPanel>
  </Tabs>
}

Controlled selection

ControlledTabsExample.tsrx
import { useState } from "octane";
import { Tabs, TabList, Tab, TabPanel, Button } from "@octaneui/core";

export function ControlledTabsExample() @{
  const [value, setValue] = useState("overview");
  <Tabs value={value} onValueChange={setValue}>
    <TabList aria-label="Project">
      <Tab value="overview">Overview</Tab>
      <Tab value="activity">Activity</Tab>
    </TabList>
    <TabPanel value="overview">
      <Button onClick={() => setValue("activity")}>View activity</Button>
    </TabPanel>
    <TabPanel value="activity">No recent activity.</TabPanel>
  </Tabs>
}

Usage

Set defaultValue for local state, or supply value and onValueChange to control selection. The initial and controlled values must identify an enabled tab. Each tab needs a unique value and a matching panel.

Give each TabList an accessible name using aria-label or aria-labelledby. Tab moves between tabs, then into the selected panel.

Inactive panels remain mounted and hidden, preserving input values and component state. IDs are generated per Tabs instance, so examples can be repeated or nested.