Navigation

Stepper

Themed multi-step wizard with linear or non-linear progression and built-in navigation controls.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjStepperComponent } from '@kouji-ui/components';
04

Playground

#playground
Step 3 — Review.
steps
active
orientation
<kj-stepper
  [(kjActiveStep)]="active"
>
  <kj-step [kjStepCompleted]="active() > 0">
    <kj-step-label>Account</kj-step-label>
    <kj-step-content>Step 1 — Account.</kj-step-content>
  </kj-step>
  <kj-step [kjStepCompleted]="active() > 1">
    <kj-step-label>Profile</kj-step-label>
    <kj-step-content>Step 2 — Profile.</kj-step-content>
  </kj-step>
  <kj-step [kjStepCompleted]="active() > 2">
    <kj-step-label>Review</kj-step-label>
    <kj-step-content>Step 3 — Review.</kj-step-content>
  </kj-step>
  <kj-step [kjStepCompleted]="active() > 3">
    <kj-step-label>Confirm</kj-step-label>
    <kj-step-content>Step 4 — Confirm.</kj-step-content>
  </kj-step>
</kj-stepper>