Components • Tabs

Tabs

Switch between related views of the same surface. The active tab is marked by a bright-red bottom border.

Horizontal tabs

Redpine transforms complex scenarios into actionable clarity across Safety, HR and Operations.

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    ...
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
</Tabs>
Accessibility

How Tabs works with assistive tech

Role
  • tablist
  • tab
  • tabpanel
Keyboard
  • ArrowLeft/Right (horizontal)
  • ArrowUp/Down (vertical)
  • Home
  • End
ARIA attributes
  • aria-selected
  • aria-controls
  • aria-labelledby
Focus behavior
  • roving-tabindex

Radix primitive manages roving tabindex. Only active tab receives tab-key focus; arrows move between tabs.