Tabs

Las Tabs organizan contenido relacionado de una misma página en paneles, mostrando uno a la vez. Por defecto se muestra el panel más relevante para la mayoría de las personas.

Propiedades y configuraciones

Cuando usarlo

Úsalas para dividir la información de una misma ficha en secciones paralelas que la persona consulta de a una: resumen, requisitos, documentos y contacto de un trámite, o las secciones de un perfil.

Si el contenido debe leerse en orden o completo, muéstralo en la página con títulos o usa Accordion; y si la persona tiene que avanzar por etapas de un formulario usa Stepper.

Buenas prácticas

Recomendado: Usa etiquetas cortas y paralelas

Nombra cada tab con una o dos palabras del mismo tipo, para que se lean de un vistazo y ninguna se corte.

Recomendado: Agrupa contenido paralelo que no hace falta comparar

Úsalas cuando cada panel es una alternativa independiente, como las formas de hacer un trámite: la persona elige una y no necesita ver las demás al mismo tiempo.

Recomendado: Usa la variante vertical para muchas secciones de un perfil

Cuando hay más secciones de las que caben en una fila, la lista vertical las mantiene legibles junto al contenido.

Recomendado: Abre la pestaña más relevante por defecto

La tab activa al cargar debe ser la que la mayoría necesita: normalmente el resumen o la información principal.

Malas prácticas

No recomendado: No uses tabs para pasos de un proceso

Si una sección debe completarse antes que la siguiente, las tabs sugieren que el orden da lo mismo. Para eso existe el Stepper.

No recomendado: No escondas información crítica en una tab secundaria

Plazos, requisitos excluyentes o costos deben estar a la vista. Quien no abre la tab no se entera.

No recomendado: No uses demasiadas tabs en horizontal

Muchas tabs en una fila reducen cada etiqueta hasta volverla ilegible y obligan a adivinar su contenido.

No recomendado: No uses tabs como navegación entre páginas del sitio

Las tabs cambian paneles dentro de una página. Si cada opción carga otra sección del sitio, corresponde la Navegación principal.

No recomendado: No uses tabs para poco contenido

Si cada tab tiene una o dos líneas, muestra todo junto en la página: se lee de una vez, sin cambiar de pestaña para encontrar un dato.

No recomendado: No separes en tabs contenido que se necesita comparar

Si la persona debe comparar opciones para decidir, como el costo y la vigencia de dos documentos, las tabs la obligan a ir y venir recordando cada dato. Muestra las opciones lado a lado, por ejemplo en una Table.

Recomendaciones de accesibilidad

Parte de enlaces reales a paneles reales
Sin JavaScript cada tab es un <a href="#panel"> hacia su <section class="cl-tabs__panel" id="…">. Mantén esa relación para que el contenido siga siendo accesible si el enhancer no corre.

Deja que el enhancer exponga el patrón de tabs
Con data-cl-tabs la lista pasa a role="tablist", cada tab a role="tab" con aria-selected y cada panel a role="tabpanel". No agregues roles manualmente que dupliquen o contradigan ese cableado.

Da a cada panel un encabezado o nombre propio
El contenido del panel debe tener sentido al llegar directo a él: incluye un título o el contexto necesario, sin depender solo de la etiqueta del tab.

Respeta la navegación con teclado
Tab entra a la lista y sale al panel; las flechas cambian de tab (izquierda/derecha en horizontal, arriba/abajo en vertical). No agregues controles interactivos dentro de la lista que rompan ese recorrido.

No dependas solo del color para el tab activo
El kit refuerza el activo con negrita, indicador de marca y sin subrayado. No sobrescribas esas señales con estilos propios que dejen solo el cambio de color.

Evita cambios de contenido inesperados
Cambiar de tab no debe enviar formularios ni borrar datos ingresados en otro panel; si un panel tiene un formulario, conserva lo escrito al volver.