FORMA Docs

Tabs

Switch between related content in the same context.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/forma/arc/tabs/tabs";
Base

In FORMA

  • Liegt in kit/arc/tabs und ist über @/forma/arc/tabs/tabs erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
  • Das Kit nutzt ihn als Tabs aus @/forma/ui/tabs — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

  • Peer views of the same object, such as Overview, Activity, and Settings.
  • Panels with different heights, where the container should spring between them.
  • Long tab sets that need to scroll horizontally with edge buttons.

When not to use

  • Use segmented-control for a compact value toggle not tied to panels.
  • Use accordion for stacked sections people read in order.
  • Use liquid-tab-bar or morph-nav for app-level navigation between routes.

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/forma/arc/tabs/tabs";

export function ProjectTabs() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Summary and stats</TabsContent>
      <TabsContent value="activity">Recent events</TabsContent>
    </Tabs>
  );
}

API reference

Tabs

Radix Tabs root that tracks direction so panels slide the way the selection moved.

PropTypeDefaultDescription
valuestring–Controlled active tab value.
defaultValuestring–Initial active tab when uncontrolled.
onValueChange(value: string) => void–Called when the active tab changes.
...propsComponentPropsWithoutRef<typeof TabsPrimitive.Root>–Other Radix root props such as activationMode and className.

TabsList

Scrollable tab strip. Shows edge scroll buttons when triggers overflow and keeps the active tab in view.

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof TabsPrimitive.List>–Radix list props, including aria-label and loop.

TabsTrigger

A tab with a shared selection pill that glides between triggers.

PropTypeDefaultDescription
value (required)string–Matches a TabsContent value.
...propsComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>–Radix trigger props such as disabled.

TabsContent

Panel that slides in and morphs its height from the previous panel.

PropTypeDefaultDescription
value (required)string–Matches a TabsTrigger value.
forceMounttrue–Keeps the panel mounted and skips the enter and exit animation.
...propsComponentPropsWithoutRef<typeof TabsPrimitive.Content>–Radix content props such as className.

Keyboard interactions

KeysAction
ArrowLeft / ArrowRightMoves between tabs and activates them.
Home / EndJumps to the first or last tab.
TabMoves focus from the tab list into the active panel.

Accessibility

  • Radix provides role="tablist", role="tab", role="tabpanel", aria-selected, and aria-controls.
  • The outgoing panel is made inert while it fades so it cannot take focus.
  • Overflow scroll buttons are labelled "Scroll tabs left" and "Scroll tabs right"; give TabsList an aria-label.

Motion

  • The selection pill glides between triggers on a morph spring, scoped to one Tabs instance.
  • Panels slide 8px in the direction of travel while the height springs from the previous panel.
  • Reduced motion swaps the pill instantly and crossfades panels in place without height animation.

Responsive behavior

  • The tab list keeps max-width 100% and scrolls horizontally when triggers overflow, with scroll buttons at the edges.
  • Focusing a tab scrolls it into view, so keyboard navigation works on narrow screens.
  • Triggers keep a 5.5rem minimum width, so many tabs overflow sooner on mobile.

Performance

  • ResizeObservers track list overflow and the active panel height; one per Tabs instance is cheap.
  • The selection pill is a shared layout animation scoped to one Tabs; avoid dozens of tab sets on one screen.

Notes for AI

  • Use for peer views of the same object. Use segmented-control for a compact value toggle that is not tied to panels, and accordion for stacked sections.
  • Every TabsTrigger value needs a matching TabsContent. Long lists scroll horizontally on their own.

Also in navigation

  • Breadcrumb: Show where a page sits in a hierarchy.
  • Pagination: Move through a long collection with clear bounds.
  • Mega menu morph: A site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.

Guidance for AI tools

Tabs: Switch between related content in the same context. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückTooltipWeiterExpandable card

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.