Stepper

Steppers provide enterprise-grade workflow progression and navigation for Aggarly Platform (intake flows, clinical builders, multi-section forms). This system supports classic and modern variants, plus an innovative ScrollSpy rail for long, structured workflows.

Default Stepper

Workflow progression (intake → consent → plan → review). Premium rail fill and clear state semantics.

Show code

import { Stepper } from "@/design-system/components/Stepper";

export function Example() {
  return (
    <Stepper
      tone="primary"
      size="md"
      variant="default"
      clickable
      defaultStep={1}
      steps={[
        { id: "intake", label: "Intake", description: "Basics" },
        { id: "consent", label: "Consent", description: "Required forms" },
        { id: "plan", label: "Plan", description: "Clinical plan" },
        { id: "review", label: "Review", description: "Confirm details" },
      ]}
    />
  );
}

Pills Stepper

Compact sub-flow navigation inside pages (tabs-like but workflow-oriented).

Show code

import { Stepper } from "@/design-system/components/Stepper";

export function Example() {
  return (
    <Stepper
      tone="neutral"
      size="sm"
      variant="pills"
      clickable
      defaultStep={0}
      steps={[
        { id: "overview", label: "Overview" },
        { id: "sessions", label: "Sessions" },
        { id: "notes", label: "Notes" },
        { id: "billing", label: "Billing" },
      ]}
    />
  );
}

Segmented Stepper

Status-like progression (draft → review → approved). Excellent for record lifecycle.

Show code

import { Stepper } from "@/design-system/components/Stepper";

export function Example() {
  return (
    <Stepper
      tone="success"
      size="md"
      variant="segmented"
      clickable
      defaultStep={1}
      steps={[
        { id: "draft", label: "Draft" },
        { id: "review", label: "In review" },
        { id: "approved", label: "Approved" },
      ]}
    />
  );
}

Timeline Stepper

Vertical clinical sectioning with meta tags (Required/Optional). Ideal for long clinical workflows.

Show code

import { Stepper } from "@/design-system/components/Stepper";

export function Example() {
  return (
    <Stepper
      tone="primary"
      size="md"
      variant="timeline"
      orientation="vertical"
      clickable
      defaultStep={1}
      steps={[
        { id: "profile", label: "Profile", description: "Student details", meta: "Required" },
        { id: "goals", label: "Goals", description: "Targets and outcomes", meta: "8 fields" },
        { id: "schedule", label: "Schedule", description: "Session cadence", meta: "Optional" },
        { id: "confirm", label: "Confirm", description: "Review and submit" },
      ]}
    />
  );
}

Innovative ScrollSpy Rail

Best for long forms and multi-section clinical builders: highlights where the user is in real time and supports click-to-scroll navigation.

Student details

Demographics, identifiers, and core record fields used across exports and dashboards.

Consent & privacy

Required consent acknowledgements, privacy policy, and authorization flows.

Clinical plan

Goals, interventions, milestones, and evidence-backed notes for clinical readiness.

Review

Final validation, submission, and confirmation. Designed for fast quality checks.

Show code

import { StepperScrollSpy } from "@/design-system/components/Stepper";

export function Example() {
  return (
    <StepperScrollSpy
      tone="primary"
      size="md"
      rootId="stepper-scroll-root"
      items={[
        { id: "s1", label: "Student details", description: "Core demographics" },
        { id: "s2", label: "Consent & privacy", description: "Required policies", meta: "Required" },
        { id: "s3", label: "Clinical plan", description: "Goals + interventions" },
        { id: "s4", label: "Review", description: "Finalize" },
      ]}
    />
  );
}

StepperWizard

Out-of-the-box Next/Back wizard with step panels, validation gating, locked future steps, and first-invalid focus. Designed to pair with FormField/FormError.

Intake Wizard

Show code

import { StepperWizard } from "@/design-system/components/Stepper";
import { FormField, FormLabel, FormControl, FormError } from "@/design-system/components/form";
import { Input } from "@/design-system/components/Input";

export function Example() {
  // Implement in a Client Component:
  // - manage field state
  // - render FormError when invalid
  // - pass validate() per step to gate Next

  return (
    <StepperWizard
      tone="primary"
      navVariant="default"
      steps={[
        {
          id: "intake",
          label: "Intake",
          description: "Student basics",
          panel: (/* form fields */ null),
          validate: async () => true,
        },
        // ...
      ]}
    />
  );
}

import { Stepper } from "@/design-system/components/Stepper"; export function Example() { return ( <Stepper tone="primary" size="md" variant="default" clickable defaultStep={1} steps={[ { id: "intake", label: "Intake", description: "Basics" }, { id: "consent", label: "Consent", description: "Required forms" }, { id: "plan", label: "Plan", description: "Clinical plan" }, { id: "review", label: "Review", description: "Confirm details" }, ]} /> ); }

import { Stepper } from "@/design-system/components/Stepper"; export function Example() { return ( <Stepper tone="neutral" size="sm" variant="pills" clickable defaultStep={0} steps={[ { id: "overview", label: "Overview" }, { id: "sessions", label: "Sessions" }, { id: "notes", label: "Notes" }, { id: "billing", label: "Billing" }, ]} /> ); }

import { Stepper } from "@/design-system/components/Stepper"; export function Example() { return ( <Stepper tone="success" size="md" variant="segmented" clickable defaultStep={1} steps={[ { id: "draft", label: "Draft" }, { id: "review", label: "In review" }, { id: "approved", label: "Approved" }, ]} /> ); }

import { Stepper } from "@/design-system/components/Stepper"; export function Example() { return ( <Stepper tone="primary" size="md" variant="timeline" orientation="vertical" clickable defaultStep={1} steps={[ { id: "profile", label: "Profile", description: "Student details", meta: "Required" }, { id: "goals", label: "Goals", description: "Targets and outcomes", meta: "8 fields" }, { id: "schedule", label: "Schedule", description: "Session cadence", meta: "Optional" }, { id: "confirm", label: "Confirm", description: "Review and submit" }, ]} /> ); }

import { StepperScrollSpy } from "@/design-system/components/Stepper"; export function Example() { return ( <StepperScrollSpy tone="primary" size="md" rootId="stepper-scroll-root" items={[ { id: "s1", label: "Student details", description: "Core demographics" }, { id: "s2", label: "Consent & privacy", description: "Required policies", meta: "Required" }, { id: "s3", label: "Clinical plan", description: "Goals + interventions" }, { id: "s4", label: "Review", description: "Finalize" }, ]} /> ); }

import { StepperWizard } from "@/design-system/components/Stepper"; import { FormField, FormLabel, FormControl, FormError } from "@/design-system/components/form"; import { Input } from "@/design-system/components/Input"; export function Example() { // Implement in a Client Component: // - manage field state // - render FormError when invalid // - pass validate() per step to gate Next return ( <StepperWizard tone="primary" navVariant="default" steps={[ { id: "intake", label: "Intake", description: "Student basics", panel: (/* form fields */ null), validate: async () => true, }, // ... ]} /> ); }