Pestañas

El componente Tabs se utiliza para agrupar diferentes contenidos de una misma temática dentro de una sección. Permite al usuario navegar de manera sencilla entre las diferentes secciones de una página.

Vista Previa

Figma

Usos

Cuándo usar

Usa pestañas para agrupar información relacionada en diferentes categorías, lo que ayuda a reducir la carga cognitiva.

Las pestañas se pueden usar para organizar contenido como formularios, configuraciones y tableros para que un usuario no tenga que navegar fuera de su flujo de trabajo para completar su tarea.

Cuándo no usar

Las pestañas nunca deben usarse para la navegación principal. Si las pestañas se vuelven demasiado complejas, considere usar otro patrón de navegación.

Las pestañas no deben usarse para indicar el progreso. Utilice steps en su lugar.

Comportamiento

Tipo

Text Only

Visualización pestaña tipo icono a la izquierda

Icon Left

Visualización pestaña tipo texto más etiqueta

Text + Tag

Visualización pestaña tipo icono a la izquierda más etiqueta

Icon Left + Tag

Estados

Visualización de la pestaña con estado por defecto

Default

Hover

Focus

Selected

Disabled

Responsive

El comportamiento en su versión móvil cambia en el ultimo elemento, agrupando en un dropdown las pestañas que no entran en pantalla pudiendo acceder a ellas y seleccionarlas. Las pestañas a visualizar serán 1 ó 2 dependiendo de la longitud de sus textos.

Visualización del comportamiento de la pestaña al mostrar una pestaña para textos largos

Mostrar una tab para textos largos

Visualización del comportamiento de la pestaña al mostrar dos pestañas para textos cortos

Mostrar 2 tabs para textos cortos

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El componente de grupo de pestañas utiliza role="tablist" para transmitir correctamente su funcionalidad a las tecnologías de asistencia.

Cada elemento que sirve de pestaña tiene rol="tab" y está contenido dentro del elemento con rol="tablist".

Cada elemento que contiene el panel de contenido de una pestaña tiene el rol="tabpanel".

Como la lista de pestañas tiene una etiqueta visible, el elemento con rol tablist tiene aria-labelledby establecido a un valor que hace referencia al elemento de etiquetado.

Cada elemento con rol="tab" tiene la propiedad aria-controls que hace referencia a su elemento tabpanel asociado.

El elemento de pestaña activo tiene el estado aria-selected establecido en true y todos los demás elementos de pestaña lo tienen establecido en false.

Cada elemento con rol="tabpanel" tiene la propiedad aria-labelledby que hace referencia a su elemento tab asociado.