# Tabs
> Pestañas estándar, pill, con íconos, verticales y deshabilitada.
Categoría: Navegación · Solar v0.8.0
Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).
## Guía: Cuándo usarlo
- Para vistas del mismo nivel dentro de una página, que se ven una a la vez.
- Si cada opción lleva a otra página, es navegación (Menús, Sidebar), no pestañas.
- Estándar para contenido; Pill para filtrar una lista; Verticales cuando hay más de 5 o 6 secciones o los nombres son largos, como en una configuración.
- Íconos solo si ayudan a reconocer cada sección: siempre con texto, nunca solos.
## Tabs estándar
```html
El Comité reúne a representantes del sector para definir lineamientos, articular propuestas y desarrollar iniciativas conjuntas.
```
## Pill tabs
```html
Todos los contenidos
```
## Con íconos
```html
El Comité reúne a representantes del sector para definir lineamientos, articular propuestas y desarrollar iniciativas conjuntas.
```
## Verticales
```html
Cuenta
Tu nombre, correo y empresa. Los cambios se guardan al presionar Guardar.
```
## Pestaña deshabilitada
```html
El Comité reúne a representantes del sector para definir lineamientos, articular propuestas y desarrollar iniciativas conjuntas.
```
## Guía: Comportamiento
Solar no entrega JavaScript: lo que sigue es lo que tu proyecto tiene que hacer al cambiar de pestaña.
- Teclado: Tab entra a la pestaña activa y sale al panel. Entre pestañas se mueve con las flechas (izquierda y derecha; arriba y abajo en las verticales), y con Inicio y Fin a la primera y la última. Por eso solo la activa queda en el orden de Tab y las demás llevan tabindex="-1".
- Al cambiar: la nueva pestaña pasa a aria-selected="true" y toma el estilo activo, y el panel muestra su contenido.
- Deshabilitada: se ve, pero no se elige ni recibe foco; las flechas la saltan. Úsala si la sección existe pero hoy no está disponible; si no aplica, mejor no mostrarla.
- En el celular: si las pestañas no caben, la fila se desplaza de lado; no se achican ni se cortan los nombres.
- Con íconos: ícono de contorno en las pestañas y relleno en la activa, para que el estado no dependa solo del color.
## Guía: Accesibilidad
La fila lleva role="tablist" con un nombre (aria-label); cada pestaña, role="tab", aria-selected y aria-controls; el panel, role="tabpanel" y aria-labelledby. Las verticales suman aria-orientation="vertical". Los íconos van con aria-hidden="true", porque el texto ya nombra la pestaña.