1 viewer
Back to Components
Component · Navigation

Tabs

Single-selected tablist with roving focus.

Category
Navigation
Slots
4
States
2
Writer
Shared
cre8.primitive.tabs

Preview

Live renderShared SSR + WASM writers

System overview content with real-time operational indicators.

<Tabs defaultTab="overview">
  <Tab id="overview" label="Overview">
    <Text
      text="System overview content with real-time operational indicators."
      variant="p"
    />
  </Tab>
  <Tab id="metrics" label="Telemetry">
    <Text
      text="Live latency, memory footprint, and graph ingestion rates."
      variant="p"
    />
  </Tab>
  <Tab id="contracts" label="Contracts">
    <Text
      text="Declared connection specs and verification proof depth."
      variant="p"
    />
  </Tab>
</Tabs>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-tabs
list—
tab—
panel—
4 rows

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
selecteddisabled
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Tabs renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-navigationready
terminalterminal-textplanned
nativenative-adapterexperimental
5 rows

Accessibility

Follows the tablist, tab, and tabpanel pattern with configurable activation and focus looping.

  • Arrow keys move focus between tabs.
  • Selected tabs control labelled tab panels.
  • Manual activation keeps focus movement separate from selection until Enter or Space.