Live Docs

Navigation

Data Display /

stable

Tabs

Navigasi konten setingkat (peer sections) dalam satu area view, dengan varian underline dan pills.

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@naraya/ui";

Overview

Tabs cocok untuk memecah konten panjang menjadi beberapa panel tanpa pindah halaman. Gunakan label tab yang singkat dan jelas.

Examples

Uncontrolled (defaultValue)

Konten profil.

<Tabs defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
  </TabsList>
  <TabsPanel value="profile">...</TabsPanel>
  <TabsPanel value="security">...</TabsPanel>
</Tabs>

Controlled

Ringkasan sistem.

Active tab:

overview

const [value, setValue] = useState("overview");
<Tabs value={value} onValueChange={setValue}>...</Tabs>

Pills variant

Daily report.

<Tabs defaultValue="day" variant="pills">...</Tabs>

Props

PropTypeDefaultDescription
Tabs.valuestring—Controlled tab value.
Tabs.defaultValuestring—Uncontrolled initial value.
Tabs.onValueChange(value: string) => void—Callback saat tab berubah.
Tabs.variant"underline" | "pills""underline"Gaya visual tabs.
TabsTrigger.value*string—Identifier tab trigger/panel.
TabsPanel.value*string—Panel yang tampil jika value match.

Tokens Used

--color-primary

Active indicator/tab highlight

--text-main

Tab label default

--text-muted

Tab label inactive

--border-subtle

List/panel border

Accessibility

  • TabsList memakai role='tablist', trigger role='tab', panel role='tabpanel'.
  • Trigger mengatur aria-selected, aria-controls, dan tabIndex sesuai active state.
  • Gunakan label tab yang deskriptif agar konteks panel mudah dipahami.