> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> A navigation component that organizes content into switchable sections — available in underline and pill visual styles.

## Overview

<div style={{display:"flex",flexDirection:"column",gap:"24px",padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div>
    <div style={{display:"flex",borderBottom:"2px solid #E5E7EB",gap:"4px",marginBottom:"16px"}}>
      <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#0479CE",fontFamily:"Inter,sans-serif",borderBottom:"2px solid #0479CE",marginBottom:"-2px",cursor:"pointer"}}>Overview</div>
      <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Analytics</div>
      <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Reports</div>
      <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#D0D5DD",fontFamily:"Inter,sans-serif",cursor:"not-allowed"}}>Settings</div>
    </div>

    <span style={{fontSize:"11px",color:"#71717a",fontFamily:"Inter,sans-serif"}}>Underline variant</span>
  </div>

  <div>
    <div style={{display:"flex",background:"#F4F4F5",borderRadius:"8px",padding:"4px",gap:"2px",width:"fit-content",marginBottom:"8px"}}>
      <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#fff",fontFamily:"Inter,sans-serif",background:"#0479CE",borderRadius:"6px",cursor:"pointer"}}>All</div>
      <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Active</div>
      <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Archived</div>
    </div>

    <span style={{fontSize:"11px",color:"#71717a",fontFamily:"Inter,sans-serif"}}>Pill variant</span>
  </div>
</div>

**Tabs** allow users to switch between related views without navigating away from the page. They support two visual styles, optional icons, and disabled states.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@araf-ds/core"

export default function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content here.</TabsContent>
      <TabsContent value="analytics">Analytics content here.</TabsContent>
      <TabsContent value="reports">Reports content here.</TabsContent>
    </Tabs>
  )
}
```

***

## Variants

### Underline (Default)

The minimal style with a bottom border indicator. Best for page-level navigation.

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{display:"flex",borderBottom:"2px solid #E5E7EB",gap:"4px"}}>
    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#0479CE",fontFamily:"Inter,sans-serif",borderBottom:"2px solid #0479CE",marginBottom:"-2px",cursor:"pointer"}}>Overview</div>
    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Analytics</div>
    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Reports</div>
    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#D0D5DD",fontFamily:"Inter,sans-serif",cursor:"not-allowed"}}>Settings</div>
  </div>
</div>

```tsx theme={null}
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
    <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content here.</TabsContent>
  <TabsContent value="analytics">Analytics content here.</TabsContent>
  <TabsContent value="reports">Reports content here.</TabsContent>
</Tabs>
```

### Pill Style

A filled, pill-shaped active indicator. Best for filtering or segmented control contexts.

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{display:"flex",background:"#F4F4F5",borderRadius:"8px",padding:"4px",gap:"2px",width:"fit-content"}}>
    <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#fff",fontFamily:"Inter,sans-serif",background:"#0479CE",borderRadius:"6px",cursor:"pointer"}}>All</div>
    <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Active</div>
    <div style={{padding:"6px 14px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer"}}>Archived</div>
  </div>
</div>

```tsx theme={null}
<Tabs defaultValue="all" variant="pill">
  <TabsList>
    <TabsTrigger value="all">All</TabsTrigger>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="archived">Archived</TabsTrigger>
  </TabsList>
  <TabsContent value="all">All items</TabsContent>
  <TabsContent value="active">Active items</TabsContent>
  <TabsContent value="archived">Archived items</TabsContent>
</Tabs>
```

### With Icons

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{display:"flex",borderBottom:"2px solid #E5E7EB",gap:"4px"}}>
    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#0479CE",fontFamily:"Inter,sans-serif",borderBottom:"2px solid #0479CE",marginBottom:"-2px",cursor:"pointer",display:"flex",alignItems:"center",gap:"6px"}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />

        <circle cx="12" cy="7" r="4" />
      </svg>

      Profile
    </div>

    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer",display:"flex",alignItems:"center",gap:"6px"}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      </svg>

      Security
    </div>

    <div style={{padding:"8px 16px",fontSize:"14px",fontWeight:500,color:"#71717A",fontFamily:"Inter,sans-serif",cursor:"pointer",display:"flex",alignItems:"center",gap:"6px"}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />

        <line x1="1" y1="10" x2="23" y2="10" />
      </svg>

      Billing
    </div>
  </div>
</div>

```tsx theme={null}
<Tabs defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile" icon={<UserIcon size={16} />}>Profile</TabsTrigger>
    <TabsTrigger value="security" icon={<ShieldIcon size={16} />}>Security</TabsTrigger>
    <TabsTrigger value="billing" icon={<CreditCardIcon size={16} />}>Billing</TabsTrigger>
  </TabsList>
</Tabs>
```

***

## API Reference

### Tabs (Root)

<ParamField path="value" type="string">
  Controlled active tab value.
</ParamField>

<ParamField path="onValueChange" type="(value: string) => void">
  Callback fired when the active tab changes.
</ParamField>

<ParamField path="defaultValue" type="string">
  Uncontrolled default active tab.
</ParamField>

<ParamField path="variant" type="string" default="underline">
  Visual style. Values: `underline` · `pill`
</ParamField>

<ParamField path="orientation" type="string" default="horizontal">
  Layout direction. Values: `horizontal` · `vertical`
</ParamField>

### TabsTrigger

<ParamField path="value" type="string">
  Tab identifier (required). Must match the corresponding `TabsContent` value.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Disables this tab.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Optional leading icon element.
</ParamField>

### TabsContent

<ParamField path="value" type="string">
  Matches the corresponding `TabsTrigger` value (required).
</ParamField>

***

## Accessibility

* Tabs follow the ARIA Tabs pattern with `role="tablist"`, `role="tab"`, and `role="tabpanel"`
* Arrow keys move focus between tabs within the `TabsList`
* Enter/Space activates the focused tab
* Active tab has `aria-selected="true"`
* Disabled tabs have `aria-disabled="true"` and are skipped by keyboard navigation
* Each `TabsContent` is linked to its trigger via `aria-labelledby`

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Tabs to organize related views on the same page
    * Limit to 2–7 tabs — more becomes hard to scan
    * Use underline for page-level navigation, pill for local filtering
    * Add icons to improve scannability for settings or profile tabs
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Tabs for navigation between separate pages — use links
    * Don't use Tabs for sequential workflows — use a Stepper instead
    * Don't mix underline and pill styles on the same page
    * Don't put too much content inside a single tab panel — consider separate pages
  </Card>
</CardGroup>