Procesos por etapas.
Usar etapas cuando una tarea larga tiene grupos claros, validación independiente y posibilidad de guardar progreso.
Cuándo usar
Usar etapas cuando una tarea larga tiene grupos claros, validación independiente y posibilidad de guardar progreso.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
- Identificación
- Documentos
- Revisión
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Título del proceso |
| 2 | Stepper |
| 3 | Título de etapa |
| 4 | Campos o decisión |
| 5 | Acciones anterior y continuar |
| 6 | Resumen final |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| upcoming | Nombre visible, no activable si depende de datos |
| current | aria-current=step |
| complete | Revisable |
| invalid | Etapa y conteo de errores |
| saved | Timestamp de progreso |
Accesibilidad
- No usar sólo números sin nombres.
- El botón Atrás no borra datos.
- La URL o servidor conserva progreso cuando corresponde.
- El resumen permite revisar antes de una mutación.
HTML de referencia
<ol class="cis-stepper">
<li aria-current="step">1. Identificación</li>
<li>2. Documentos</li>
<li>3. Revisión</li>
</ol>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.