layout.title

layout.subtitle

@ng-orbit/wizard

Wizard

A headless wizard controller for multi-step flows where the consumer keeps ownership of forms, layout, validation, and submission side effects.

Use orbitWizard for navigation state and completion rules, then pair it with your own form UI or an optional renderer package.

Install @ng-orbit/wizard

    pnpm add @ng-orbit/wizard @ng-orbit/wizard-kit

Import

    import { OrbitWizardDirective, type OrbitWizardStepDef } from '@ng-orbit/wizard';
import { OrbitWizardStepFormSyncDirective } from '@ng-orbit/wizard-kit';
@ng-orbit/wizard-render-daisy

Daisy

Renderer package for DaisyUI and Tailwind-based product surfaces.

Use the Daisy renderer when the consuming product already has DaisyUI tokens and wants a quick first integration without designing step navigation from scratch.

  • Install Tailwind + DaisyUI in the consuming app.
  • Keep forms and submission handlers in your own feature component.

docs.shared.livePreview

Rendered inside the docs host using the real controller contract.

Daisy renderer integration

    import { ReactiveFormsModule } from '@angular/forms';
import { OrbitWizardDirective } from '@ng-orbit/wizard';
import { OrbitWizardStepFormSyncDirective } from '@ng-orbit/wizard-kit';
import { OrbitWizardRenderDaisyComponent } from '@ng-orbit/wizard-render-daisy';

<section orbitWizard #wizard="orbitWizard" [steps]="steps" (completed)="submit()">
  <orbit-wizard-render-daisy [wizard]="wizard">
    <form
      [formGroup]="detailsForm"
      [orbitWizardStepFormSync]="wizard"
      orbitWizardStepId="details"
      [orbitWizardStepForm]="detailsForm"
    >
      <!-- consumer-owned fields -->
    </form>
  </orbit-wizard-render-daisy>
</section>