{
  "title": "Tabs",
  "description": "Tab pattern with keyboard nav, roving tabindex, and shared-value content/trigger pairing.",
  "url": "/docs/components/tabs",
  "since": "0.2.0",
  "tags": [
    "navigation"
  ],
  "platform": "both",
  "source": "---\ntitle: Tabs\ndescription: Tab pattern with keyboard nav, roving tabindex, and shared-value content/trigger pairing.\nsince: 0.2.0\ntags: [navigation]\nplatform: both\ncategory: navigation\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Tabs\" />\n\n## At a glance\n\n- Compose `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. The `value` prop on each trigger pairs it with the matching content panel.\n- Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\n- **Keyboard nav** (WAI-ARIA tablist pattern):\n  - Arrow Right / Down → next tab\n  - Arrow Left / Up → previous tab\n  - Home / End → first / last\n  - Selection follows focus by default; pass `activation=\"manual\"` to require Enter / Space to activate.\n- Tabs render in their own roving tabindex group: tabbing into the list lands on the active tab, and the active tab is the only one in the tab order.\n\n## `orientation`\n\nLays the trigger list out horizontally (default) or vertically. Affects\nkeyboard nav too: in `vertical` mode `ArrowUp` / `ArrowDown` move\nbetween tabs, in `horizontal` mode it's `ArrowLeft` / `ArrowRight`\n(matching the WAI-ARIA tablist convention).\n\n```tsx\n<Tabs orientation=\"vertical\" defaultValue=\"account\">{/* … */}</Tabs>\n```\n\n## Preview\n\n<Preview name=\"tabs-basic\" />\n\n## Props\n\n### Tabs\n\n<PropsTable component=\"Tabs\" />\n\n### TabsList\n\n<PropsTable component=\"TabsList\" />\n\n### TabsTrigger\n\n<PropsTable component=\"TabsTrigger\" />\n\n### TabsContent\n\n<PropsTable component=\"TabsContent\" />\n"
}