# Tabs

> Switches between sibling views of the same subject.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rrios-forge/ui/molecules/tabs";`
- **Source**: `packages/ui/src/molecules/tabs`

Semantic tab strip. Composes `@radix-ui/react-tabs` (`role="tablist"` + `role="tab"` + `role="tabpanel"`, arrow-key navigation, type-ahead). `variant="underline"` (default) for low-chrome page sub-navs; `variant="enclosed"` for tab pills inside cards or panels.

## Use it for

- Tabs / select / autocomplete → `Tabs` / `Select` / `Combobox` or `SearchField`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `presentation` | — | `tabs` `segmented` | `tabs` | How the same thing is staged. |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-tabs--playground) · frame: `/iframe.html?id=components-molecules-tabs--playground&viewMode=story`
- [Variants](/?path=/story/components-molecules-tabs--variants) · frame: `/iframe.html?id=components-molecules-tabs--variants&viewMode=story`
- [Sizes](/?path=/story/components-molecules-tabs--sizes) · frame: `/iframe.html?id=components-molecules-tabs--sizes&viewMode=story`
- [In context](/?path=/story/components-molecules-tabs--in-context) · frame: `/iframe.html?id=components-molecules-tabs--in-context&viewMode=story`
- [Keyboard flow (interaction test)](/?path=/story/components-molecules-tabs--keyboard-flow) — interaction test · frame: `/iframe.html?id=components-molecules-tabs--keyboard-flow&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).