Pasos

Los botones “paso a paso” o stepper, muestra el progreso a través de una secuencia de pasos lógicos y numerados. Los steppers pueden mostrar un mensaje de retroalimentación transitorio después de guardar un paso.

Vista Previa

Figma

Usos

Cuándo usar

Los steppers muestran el progreso a través de una secuencia al dividirla en múltiples pasos lógicos y numerados.

Cuándo no usar

Evitar su uso si el proceso no se divide naturalmente en pasos o si el proceso es tan simple que no necesita ser dividido en pasos.

Comportamiento

Tipo

Horizontal

Estados

Visualización del comportamiento del componente pasos por defecto

Default

Current

Error

Success

Responsive

Visualización del comportamiento del componente pasos en pantallas tamaño móvil

Mobile

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.

Stepper se encapsulan en una lista ordenada ol.

Stepper tiene role="region".

Stepper cuenta con el estado aria-current en el step actual para representar en cual de ellos se encuentra el usuario.

Tambien cuenta con el atributo aria-selected para idnicar el estado "seleccionado" actual de lso steps.

Los steps tienen la propiedad tabindex=”0” para poder acceder a ellos.

Los iconos de status cuentan con un aria-label.