Delphi Design

A tabs component for organizing content into separate views where only one is visible at a time.

Basic

Default

Make changes to your account here.

Disabled Tab

Content for tab one.

With Content

Full Width Tabs

Username

Bio

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@delphi/ui";

export function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content 1</TabsContent>
      <TabsContent value="tab2">Content 2</TabsContent>
    </Tabs>
  );
}

Controlled Tabs

import { useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@delphi/ui";

export function ControlledExample() {
  const [activeTab, setActiveTab] = useState("tab1");

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab}>
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content 1</TabsContent>
      <TabsContent value="tab2">Content 2</TabsContent>
    </Tabs>
  );
}

API Reference

Prop	Type	Default	Description
`defaultValue`	`string`	-	Default active tab (uncontrolled)
`value`	`string`	-	Active tab value (controlled)
`onValueChange`	`(value: string) => void`	-	Callback when active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab orientation

TabsTrigger Props

Prop	Type	Default	Description
`value`	`string`	-	Unique value for the tab
`disabled`	`boolean`	`false`	Whether the tab is disabled

Use tabs to organize related content into logical sections

Keep tab labels short and descriptive (1-2 words)

Ensure tabs are keyboard navigable with arrow keys

Use aria-label on the TabsList for screen readers

Preserve tab content state when switching between tabs

Use tabs for sequential steps — use a stepper or wizard instead

Create more than 5-6 tabs — consider a different pattern

Mix tabs with unrelated content sections

Change page URL when switching tabs unless necessary for deep linking