Stepper

Alta de cliente

Un paso cada vez, con el progreso en una navegación con nombre: el paso actual lleva aria-current="step" y cada paso dice su estado en palabras (completado, con errores, pendiente). Avanzar es siempre decisión del consumidor: Siguiente emite next, la página valida y, si todo está bien, cambia el paso; aquí la cuenta se comprueba en un servidor simulado y el stepper espera (busy). Volver atrás, con Anterior o pulsando un paso completado, lo hace el propio stepper. Al cambiar de paso el foco va a su encabezado. Cada paso lleva su resumen de errores y los campos no anuncian su error (announceError=false). En un contenedor estrecho la fila pasa a «Paso 2 de 4: Contacto».

Angular

Vue

Paso 1 de 4: Datos personales

Nombre y apellidos

DNI o NIE

<flt-stepper [steps]="steps" [(current)]="current" [errorSteps]="errorSteps" [busy]="busy" (next)="onNext($event)" (finish)="send()">
  <ng-template fltStepperPanel="datos">
    <flt-error-summary [items]="errors.datos" [headingLevel]="3" />
    <flt-dni controlId="alta-dni" label="DNI o NIE" [errorText]="…" [announceError]="false" />
  </ng-template>
  …
</flt-stepper>

<FltStepper v-model:current="current" :steps="steps" :error-steps="errorSteps" :busy="busy" @next="onNext" @finish="send">
  <template #datos>
    <FltErrorSummary :items="errors.datos" :heading-level="3" />
    <FltDniInput control-id="alta-dni" label="DNI o NIE" :error-text="…" :announce-error="false" />
  </template>
  …
</FltStepper>