# Tabs

- Page: <https://kznlabs.github.io/labsUI/components/tabs>

## Tabs (`tabs`, component)

WAI-ARIA tabs with arrow, Home and End keys. One indicator springs between tabs, segmented or underline. Inactive panels stay in the DOM for SEO; the active one fades in.

- Install: `npx @kznlabs/labsui add tabs`
- Docs: <https://kznlabs.github.io/labsUI/components/tabs>
- Brings: list, use-controllable-state, use-indicator, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Tabs>` (+ <div> props): WAI-ARIA tabs. Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  - `defaultValue?: string` = `""`: Tab at first render (uncontrolled).
  - `onValueChange?: (value: string) => void`: Called with the activated tab's value.
  - `value?: string`: Controlled tab; pair with `onValueChange`.
  - `variant?: "segmented" | "underline"` = `"segmented"`: "segmented": pill in a muted track. "underline": bar under the active tab.
- `<TabsList>` (+ <div> props): One indicator springs to the active tab, always behind the labels. Arrows, Home and End move focus.
- `<TabsTrigger>` (+ <button> props)
  - `value: string`: Matches a `TabsContent` value.
- `<TabsContent>`: Inactive panels stay in the DOM (`hidden`) so their content remains crawlable.
  - `children: ReactNode`: Panel content; stays in the HTML while hidden.
  - `value: string`: Matches a `TabsTrigger` value.

### Usage

```tsx
<Tabs defaultValue="a"><TabsList aria-label="Views"><TabsTrigger value="a">A</TabsTrigger><TabsTrigger value="b">B</TabsTrigger></TabsList><TabsContent value="a">…</TabsContent><TabsContent value="b">…</TabsContent></Tabs>
```

### Example: settings-tabs.tsx

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SettingsTabs() {
  return (
    <Tabs defaultValue="account" variant="underline">
      <TabsList aria-label="Settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings</TabsContent>
      <TabsContent value="password">Password settings</TabsContent>
    </Tabs>
  );
}
```