Stepper

El Stepper muestra el avance de una persona en un flujo de varios pasos, como una postulación o un formulario largo. Indica qué pasos están completos, cuál es el actual y cuáles faltan.

Propiedades y configuraciones

Cuando usarlo

Úsalo arriba de un formulario dividido en etapas que se completan en orden: postulaciones a beneficios, solicitudes de subsidio, agendamiento de horas o inscripciones. Ayuda a que la persona sepa cuánto le falta y en qué parte está.

Buenas prácticas

Recomendado: Divide el flujo en pocos pasos con nombres claros

Agrupa el formulario en 3 a 5 etapas y nombra cada una por lo que la persona hace o entrega.

Recomendado: Mantén el estado de cada paso al día

Marca como completados los pasos terminados y como activo solo el paso en curso, para que la persona vea su avance real.

Recomendado: Termina el flujo con una etapa de revisión

Un último paso de “Revisión” permite comprobar los datos antes de enviar y evita errores que después cuesta corregir.

Recomendado: Acompaña el Stepper con el título del paso actual

Repite el nombre del paso activo como título del formulario, para que la persona sepa qué completar sin depender del indicador.

Malas prácticas

No recomendado: No uses demasiados pasos

Más de cinco o seis etapas hacen que el flujo se vea eterno y aprietan los nombres. Agrupa preguntas relacionadas en menos pasos.

No recomendado: No uses nombres genéricos o poco descriptivos

“Información”, “Datos” u “Otros” no dicen qué hay que hacer en cada etapa. El eyebrow ya indica el número del paso.

No recomendado: No dividas en pasos un formulario corto

Si el formulario tiene pocos campos, muéstralos juntos en una sola pantalla. Separarlos en pasos solo agrega clics y hace que el trámite parezca más largo.

No recomendado: No marques varios pasos como activos

Solo puede haber un paso actual. Dos pasos activos a la vez confunden sobre dónde está la persona.

Recomendaciones de accesibilidad

Usa una lista ordenada con nombre
El Stepper es un <ol class="cl-stepper" aria-label="Progreso del formulario">: el orden de los pasos se anuncia de forma nativa. Ajusta el aria-label al flujo (p. ej. “Progreso de la postulación”).

Marca el paso actual con aria-current="step"
El paso activo lleva aria-current="step", que los lectores de pantalla anuncian como “paso actual”. Actualízalo al avanzar o retroceder.

Anuncia el estado de cada paso en texto
Los íconos de check y lápiz son decorativos (aria-hidden="true"). Agrega el estado como texto accesible (p. ej. “completado”, “pendiente”) para que no dependa solo del ícono o el color.

Indica los pasos no disponibles
Un paso deshabilitado lleva aria-disabled="true". Explica en el formulario por qué no aplica, en vez de dejarlo solo apagado.

Repite el progreso en el título del formulario
Incluye “Paso 2 de 4: Domicilio” en el encabezado de la pantalla y mueve el foco a ese título al cambiar de paso.

Si los pasos son navegables, usa controles reales
El Stepper del kit no es interactivo. Si permites volver a un paso completado, envuelve ese paso en un <button> o enlace con nombre claro y foco visible.