# Tabs

> Secciones de la misma página que se turnan. Subrayado bajo la activa.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "sebs7n-ui/tabs"
```

## Ejemplos

### Secciones de la misma página

La lista entera es una sola parada de tabulación; adentro se recorre con ← →.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "sebs7n-ui/tabs"

function Basico() {
  return (
    <Tabs className="w-full max-w-lg" defaultValue="resumen">
      <TabsList>
        <TabsTrigger value="resumen">Resumen</TabsTrigger>
        <TabsTrigger value="items">Ítems</TabsTrigger>
        <TabsTrigger value="historial">Historial</TabsTrigger>
        <TabsTrigger disabled value="afip">
          AFIP
        </TabsTrigger>
      </TabsList>
      <TabsContent value="resumen">Factura 0012 · Acme S.A. · $ 128.400 · vence el 30/09.</TabsContent>
      <TabsContent value="items">3 ítems: consultoría, hosting y soporte.</TabsContent>
      <TabsContent value="historial">Emitida el 01/09. Enviada por email el 01/09. Vista el 03/09.</TabsContent>
      <TabsContent value="afip">Sin datos.</TabsContent>
    </Tabs>
  )
}
```

## Props

### Tabs

Hereda las props de `Tabs.Root`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TabsContent

Hereda las props de `Tabs.Panel`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TabsList

Hereda las props de `Tabs.List`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TabsTrigger

Hereda las props de `Tabs.Tab`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| ← → | Se mueve entre tabs y activa al pasar. |
| Home · End | Primera y última. |
| Tab | Sale de la lista al panel: la lista entera es una sola parada. |

## Accesibilidad

- Base UI emite `role="tablist"` / `tab` / `tabpanel` con `aria-selected` y `aria-controls`.
- El panel es enfocable (`tabindex="0"`) para poder llegar a su contenido con el teclado.
- La tab activa se marca con el subrayado **y** con el color del texto: no depende solo del color.

## Reglas de uso

- **Contenido de la misma página, mismo nivel.** Si cada sección tiene su URL, son links, no tabs.
- El contenido de todas las tabs debería costar lo mismo: si una tarda 3 segundos en cargar, poné una página.
- 3 a 6 tabs. Más, un `Select` o una navegación lateral.
- No anides tabs dentro de tabs.

## Relacionados

[toggle-group](/docs/components/toggle-group.md) · [navigation-menu](/docs/components/navigation-menu.md)