Stepper | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

A workspace that feels like yours

Enter a name, choose preferences and review the details before finishing. The steps show progress through the form.

View and copy the complete example

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuStepperComponent } from '@neural-ui/native/stepper';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuInputComponent, NeuSwitchComponent, NeuCardComponent, NeuStepperComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">A workspace that feels like yours</text><text class="product-caption">Three small steps to get started</text></view><view class="product-section"><neu-stepper [steps]="steps" [activeStep]="step()" (activeStepChange)="visitStep($event)" [linear]="true" [completed]="completed()" (finished)="finished.set(true)">
      @if (step() === 0) {
        <neu-input label="Full name" placeholder="Enter your name" hint="Enter a name to continue" [(value)]="name" />
      } @else if (step() === 1) {
        <neu-switch label="Email updates" hint="You can change this preference later" [(checked)]="updates" />
      } @else {
        <neu-card title="Review your profile" [description]="name()">
          <text>{{ updates() ? 'Email updates enabled' : 'Email updates disabled' }}</text>
        </neu-card>
      }
    </neu-stepper>
    <text>{{ finished() ? 'Onboarding completed' : 'Step ' + (step() + 1) + ' of ' + steps.length }}</text></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly steps: readonly NeuOption[] = [{ id: 'profile', label: 'Profile' }, { id: 'preferences', label: 'Preferences' }, { id: 'review', label: 'Review' }];
  readonly step = signal(0);
  readonly name = signal('');
  readonly updates = signal(true);
  readonly visited = signal<readonly string[]>([]);
  readonly finished = signal(false);
  readonly completed = computed(() => [
    ...(this.name().trim() ? ['profile'] : []),
    ...this.visited().filter(id => id !== 'profile'),
  ]);
  visitStep(index: number): void {
    this.step.set(index);
    const id = this.steps[index]?.id;
    if (id) this.visited.update(ids => ids.includes(id) ? ids : [...ids, id]);
  }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Stepper · android · native capture — **Android**Native screenshot

Stepper · ios · native capture — **iOS**Native screenshot

Personalization

Projected content

Between the step indicators and the navigation buttons. Render the current step’s form or summary from activeStep().

Use native elements from @ng-native/components and public Neural Native controls. Angular styles belong to the component that declares this content.

API reference

Inputs

Name	Type	Default	Binding	Description
steps	readonly NeuOption[]	[]	Input	Ordered step definitions. The activeStep property uses their zero-based array position.
linear	boolean	false	Input	Requires completion of preceding steps before advancing through the stepper.
completed	readonly string[]	[]	Input	IDs of steps considered complete by your application.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
previousLabel	string	'Previous'	Input	Text or accessible name used for previous. It does not perform the action by itself.
nextLabel	string	'Next'	Input	Text or accessible name used for next. It does not perform the action by itself.
finishLabel	string	'Finish'	Input	Text or accessible name used for finish. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
activeStep	number	0	Model · two-way	Current zero-based step position. Bind a writable signal with [(activeStep)].

Outputs

Name	Payload	When it emits
activeStepChange	number	Emits the updated activeStep value. [(activeStep)] binds this output together with its model input.
finished	void	Requests completion of the stepper. Your application decides the resulting operation.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly activeStep = signal<number>(0);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.