Different Step Sizes

Extra Small (xs)

Form wizard with 1 steps. Currently on step 1.

XS Size

• XS Step

Extra small step size

Small (sm)

Form wizard with 1 steps. Currently on step 1.

SM Size

• SM Step

Small step size

Large (lg)

Form wizard with 1 steps. Currently on step 1.

LG Size

• LG Step

Large step size

Code

import React from "react";
import FormWizard from "react-form-wizard-component";
import "react-form-wizard-component/dist/style.css";

export default function Sample10DifferentStepSizes() {
  return (
    <>
      <div style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: 16 }}>
        <h4>Extra Small (xs)</h4>
        <FormWizard stepSize="xs" title="XS Size" onComplete={(data?: any) => {
          console.log("Wizard completed with data:", data);
        }}>
          <FormWizard.TabContent title="XS Step" icon="ti-minus">
            <p>Extra small step size</p>
          </FormWizard.TabContent>
        </FormWizard>

        <h4>Small (sm)</h4>
        <FormWizard stepSize="sm" title="SM Size" onComplete={(data?: any) => {
          console.log("Wizard completed with data:", data);
        }}>
          <FormWizard.TabContent title="SM Step" icon="ti-plus">
            <p>Small step size</p>
          </FormWizard.TabContent>
        </FormWizard>

        <h4>Large (lg)</h4>
        <FormWizard stepSize="lg" title="LG Size" onComplete={(data?: any) => {
          console.log("Wizard completed with data:", data);
        }}>
          <FormWizard.TabContent title="LG Step" icon="ti-plus">
            <p>Large step size</p>
          </FormWizard.TabContent>
        </FormWizard>
      </div>
      <style>{`
        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css");
      `}</style>
    </>
  );
}