MultinairePagination

Progress indicator for multi-step flows with responsive mobile and desktop layouts.

Basic Usage

import { MultinairePagination } from '@multinaire/multinaire-design';

<MultinairePagination
  items={['Personal Info', 'Address', 'Payment', 'Review']}
  selectedIndex={currentStep}
/>

Props

Prop	Type	Default	Description
items	string[]	-	Array of step labels
selectedIndex	number	-	Currently active step (0-indexed)
margin	SpacingProps	-	Margin spacing

Examples

Onboarding Steps

const steps = ['Welcome', 'Permissions', 'Profile', 'Complete'];
const [currentStep, setCurrentStep] = useState(0);

<MultinaireContainer flex={1}>
  <MultinairePagination
    items={steps}
    selectedIndex={currentStep}
    margin={{ horizontal: 16, top: 16 }}
  />

  <MultinairePageView
    itemsMap={{
      Welcome: <WelcomeStep />,
      Permissions: <PermissionsStep />,
      Profile: <ProfileStep />,
      Complete: <CompleteStep />,
    }}
    selectedItem={steps[currentStep]}
    onChange={(item) => setCurrentStep(steps.indexOf(item))}
    onFinish={completeOnboarding}
  />
</MultinaireContainer>

Checkout Flow

const checkoutSteps = ['Cart', 'Shipping', 'Payment', 'Confirm'];

<MultinairePagination
  items={checkoutSteps}
  selectedIndex={checkoutStep}
  margin={16}
/>

Form Wizard

function FormWizard() {
  const steps = ['Basic Info', 'Details', 'Documents', 'Submit'];
  const [step, setStep] = useState(0);

  return (
    <>
      <MultinairePagination items={steps} selectedIndex={step} />

      <MultinaireContainer flex={1} padding={16}>
        {step === 0 && <BasicInfoForm onNext={() => setStep(1)} />}
        {step === 1 && <DetailsForm onNext={() => setStep(2)} onBack={() => setStep(0)} />}
        {step === 2 && <DocumentsForm onNext={() => setStep(3)} onBack={() => setStep(1)} />}
        {step === 3 && <ReviewForm onSubmit={submit} onBack={() => setStep(2)} />}
      </MultinaireContainer>
    </>
  );
}

Responsive Behavior

• Mobile: Shows a horizontal progress bar with step count (1/4)
• Desktop: Shows a vertical stepper with checkmarks for completed steps