Tabs

A headless tabs primitive for organizing content into switchable panels.

Basic

A simple tab interface. Use TabsList with TabsTrigger components for navigation and TabsContent for each panel.

Controlled

Control the active tab externally via @bind-Value. The Value parameter determines which TabsContent panel is visible.

Anatomy

Loading example…

Keyboard Navigation

  • ← / → - Navigate tabs (horizontal)
  • ↑ / ↓ - Navigate tabs (vertical)
  • Home - First tab
  • End - Last tab
  • Tab - Move to content panel