Tabs

Pestañas para alternar entre vistas de contenido relacionado.

---

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@imansi/ui';

---

Uso básico

<Tabs defaultValue="cuenta">
  <TabsList>
    <TabsTrigger value="cuenta">Cuenta</TabsTrigger>
    <TabsTrigger value="password">Contraseña</TabsTrigger>
    <TabsTrigger value="notificaciones">Notificaciones</TabsTrigger>
  </TabsList>
  <TabsContent value="cuenta">Contenido de cuenta</TabsContent>
  <TabsContent value="password">Contenido de contraseña</TabsContent>
  <TabsContent value="notificaciones">Contenido de notificaciones</TabsContent>
</Tabs>

---

Controlado

const [tab, setTab] = useState('cuenta');

<Tabs value={tab} onValueChange={setTab}>
  {/* ... */}
</Tabs>

---

Con deshabilitado

<TabsList>
  <TabsTrigger value="activo">Activo</TabsTrigger>
  <TabsTrigger value="proximamente" disabled>
    Próximamente
  </TabsTrigger>
</TabsList>

---

Props

Tabs

Prop	Tipo	Default	Descripción
value	string	—	Tab activo (controlado)
defaultValue	string	—	Tab inicial
onValueChange	(value: string) => void	—	Callback al cambiar
orientation	'horizontal' | 'vertical'	'horizontal'	Dirección

TabsTrigger

Prop	Tipo	Default	Descripción
value	string	—	Identificador de esta tab
disabled	boolean	false	Deshabilita la tab

---

Accesibilidad

• Navegable con Tab
• Flechas ← → cambian entre tabs
• Home / End van a la primera/última
• role="tablist" + role="tab" + role="tabpanel"
• aria-selected y aria-controls automáticos