Component

Stepper

Step-by-step wizard with free or linear navigation, completion state and imperative methods next() / prev().

import { NeuStepperComponent } from '@neural-ui/core/stepper';

Checkout - step 1 of 4

🛒 You have 3 items in the cart for a total of €127.90.

With completed steps

import { NeuStepperComponent, NeuStepperStep, viewChild } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  imports: [NeuStepperComponent],
  template: `
    <neu-stepper #stepper
      [steps]="steps"
      [activeStep]="step()"
      (stepChange)="step.set($event)"
    />
    <button (click)="stepper.next()">Siguiente</button>
    <button (click)="stepper.prev()">Anterior</button>
  `
})
export class MyComponent {
  step = signal(0);
  stepper = viewChild(NeuStepperComponent);

  steps: NeuStepperStep[] = [
    { label: 'Datos personales' },
    { label: 'Método de pago'  },
    { label: 'Confirmar'       },
  ];
}