Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

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
Vista previa pasos

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. 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

Visualización del comportamiento del componente pasos tipo horizontal
Horizontal

Estados

Visualización del comportamiento del componente pasos por defecto
Default
Visualización del comportamiento del componente pasos tipo current
Current
Visualización del comportamiento del componente pasos tipo error
Error
Visualización del comportamiento del componente pasos tipo success
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.