@k2b/ui

Tabs

Accessible controlled peer views with compositional or data-driven items.

Project summary and current health.

TSX

const [tab, setTab] = createSignal("overview");

<Tabs ariaLabel="Project sections" value={tab} onValueChange={setTab}>

<Tabs.Item value="overview" label="Overview" icon="ti ti-layout-dashboard">

<Overview />

</Tabs.Item>

<Tabs.Item value="activity" label="Activity" icon="ti ti-activity">

<Activity />

</Tabs.Item>

<Tabs.Item value="archive" label="Archive" disabled>

<Archive />

</Tabs.Item>

</Tabs>

Tabs switches between a small controlled set of peer views. Prefer colocated Tabs.Item children when each tab owns content; use options for data-driven or routed tabs.

Use Tabs

Use tabs for peer views. Use Disclosure for optional detail that does not replace the current view.

Import

import { Tabs } from "@k2b/ui";

Example

const [tab, setTab] = createSignal("overview");

<Tabs ariaLabel="Project sections" value={tab} onValueChange={setTab}>
  <Tabs.Item value="overview" label="Overview" icon="ti ti-layout-dashboard">
    <Overview />
  </Tabs.Item>
  <Tabs.Item value="activity" label="Activity" icon="ti ti-activity">
    <Activity />
  </Tabs.Item>
</Tabs>

value may be a Solid accessor or a value. onValueChange receives the selected item value. Each item accepts value, label, optional icon, optional disabled, and panel content as children.

Data-driven API

Pass options when tabs come from data or content is rendered by a router. Each option has the same value, label, icon, and disabled contract plus an optional panel.

Accessibility

Tabs link triggers and panels with ARIA ids. Arrow keys move by orientation; Home and End select the edges. Selection and roving focus require hydration.

Runtime

Tabs render complete server HTML. Selection and roving focus require hydration.