Stepper

Guide a multi-step task while keeping content and state in the application.

Category: Navigation
Import: @neural-ui/core/stepper
Selector: neu-stepper

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

Usage

steps supplies labels, optional descriptions, completed flags and disabled flags. activeStep is zero-based; accept stepChange to update it. linear prevents skipping ahead more than one step unless the current step is marked completed. next() and prev() propose adjacent steps and respect disabled entries. Render the active content with ordinary Angular control flow inside the component.

Examples

Try the behavior and open Code for the implementation.

Enter your contact details.

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

Enter your contact details.

Active step: 1

Linear navigation

First step completed

Disable review

<neu-stepper
  #wizard
  [steps]="steps()"
  [activeStep]="active()"
  [linear]="true"
  (stepChange)="active.set($event)"
>
  @switch (active()) {
    @case (0) { <p>Contact details</p> }
    @case (1) { <p>Delivery address</p> }
    @case (2) { <p>Review order</p> }
  }
  <button neu-button (neuClick)="wizard.next()">
    Continue
  </button>
</neu-stepper>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const steps = signal([
  {
    "label": "Contact",
    "description": "Your details",
    "completed": false
  },
  {
    "label": "Delivery",
    "description": "Address"
  },
  {
    "label": "Review",
    "description": "Confirm order",
    "disabled": false
  }
]);

export const active = signal(0);

Data and content

The application owns activeStep, completion and validation. Calling next() does not mark a step completed or validate a form. Default projection is ordinary content, not a neuStepContent directive.

Accessibility and keyboard

The active button has aria-current="step". Disabled steps cannot be focused. Use Tab to move between enabled buttons and Enter or Space to propose a step. On compact screens labels are available through the accessible name and tooltip.

Key	Action
`Tab`	Move between enabled step buttons.
`Enter`	Propose the focused step; the current step is marked with aria-current.
`Space`	Propose the focused step; the current step is marked with aria-current.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`activeStep`	`number`	`0`	`[activeStep]`	Applied zero-based active index.
`linear`	`boolean`	`false`	`[linear]`	Restrict forward skips unless the current step is completed.
`steps`	`NeuStepperStep[]`	`[]`	`[steps]`	Ordered step labels, descriptions and completed/disabled states.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`stepChange`	`number`	`(stepChange)="onStepChange($event)"`	Proposes the next enabled index; accept it in activeStep.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Active step content View example	Content projection Use @switch on activeStep to render application-owned content; no neuStepContent directive is needed.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Step content

*

Contact

Your details

This content belongs to the application and follows activeStep.

Public methods

Name	Contract
`goTo`	`goTo(i: number): void;`
`next`	`next(): void;`
`prev`	`prev(): void;`

Public Types

Open a type to inspect its definition and interface fields.

NeuStepperStepTypeScript

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

// Public declaration (reference only)
export interface NeuStepperStep {
  completed?: boolean;
  description?: string;
  disabled?: boolean;
  label: string;
}

Styles and tokens

Use public tokens for spacing, surface, text and focus. Check projected content and controls in both themes and at narrow widths.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-stepper-connector-gap`	Inherited theme value used by this component	Field surface	`var(--neu-space-2)`Root declaration	`--neu-space-2`
`--neu-stepper-indicator-radius`	Corner radius	Field surface	`calc(var(--neu-stepper-indicator-size) / 2)`Root declaration	`--neu-stepper-indicator-size`
`--neu-stepper-indicator-size`	Inherited theme value used by this component	Field surface	`32px`Root declaration	`No token alias`

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-fg`	Foreground drawn over the primary background	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-primary-solid`	Solid brand action background	Shared by other Core consumers; scope the override.	`#006ee6`
`--neu-primary-solid-fg`	Foreground of solid brand actions	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`