Tabs

Default

Pair each TabsTrigger with a TabsContent sharing its value.

Disabled tab

Many tabs

A row of tabs wider than its container stays one row and scrolls sideways inside itself; the page never widens. A fade marks each side that has hidden tabs, and the selected tab is scrolled into view when the row appears and whenever the selection changes. Swipe or scroll the row, or use the arrow keys, Home and End: focus and the row move together. A label wider than the row wraps inside its tab, which grows taller.

Name the row with aria-label on TabsList, so the scrolling area has a name.

Vertical

Props

Accessibility

• Linked tablist, tab, and tabpanel roles.
• Arrows move between tabs; Home/End selects first/last. Disabled tabs are skipped. In a row that scrolls, the focused tab is scrolled into view with it.
• Underline and weight identify the active tab alongside color; triggers and panels have visible focus rings.
• In forced-colors mode the underline is drawn in the Highlight system color and keyboard focus is a system-color outline.

Manifest entry

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">OVERVIEW</TabsTrigger>
    <TabsTrigger value="logs">LOGS</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">System nominal.</TabsContent>
  <TabsContent value="logs">No entries.</TabsContent>
</Tabs>

{
  "description": "Tabbed interface root. Underline-accent style. Wraps TabsList and one TabsContent per TabsTrigger.",
  "props": {
    "motion": {
      "type": "enum",
      "values": [
        "auto",
        "none"
      ],
      "default": "auto",
      "description": "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
    },
    "value": {
      "type": "string"
    },
    "defaultValue": {
      "type": "string"
    },
    "onValueChange": {
      "type": "function"
    },
    "orientation": {
      "type": "enum",
      "values": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    }
  },
  "slots": {
    "children": {
      "type": "TabsList | TabsContent",
      "required": true
    }
  },
  "composable_with": [
    "Card"
  ],
  "never_inside": [
    "Button",
    "Badge"
  ],
  "example": "<Tabs defaultValue=\"overview\">\n  <TabsList>\n    <TabsTrigger value=\"overview\">OVERVIEW</TabsTrigger>\n    <TabsTrigger value=\"logs\">LOGS</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">System nominal.</TabsContent>\n  <TabsContent value=\"logs\">No entries.</TabsContent>\n</Tabs>"
}

Motion

Pointer and touch selection move the underline in 150ms. The active panel and focus update immediately. Keyboard selection, resize, and font geometry changes settle immediately. Both orientations and unequal tab widths are supported.

Use motion="none" for frequently operated controls. The default motion="auto" respects system reduced motion, skips keyboard and assistive activation, and starts from the supplied resting state. See Motion for the interactive playground.