React Form Wizard
Legacy demos (0.2.x)

Custom Title and Subtitle

You can customize the title and subtitle of the form wizard by passing the title and subtitle props to the FormWizard component.

Form wizard with 3 steps. Currently on step 1.

My custom title

My custom subcription

Step 1 of 3: Personal details

First Tab

Some content for the first tab

Code

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

export default function FormWizardSample() {
  const handleComplete = () => {
    console.log("Form completed!");
    // Handle form completion logic here
  };
  return (
    <>
    <FormWizard
      onComplete={handleComplete}
      title="My custom title"
      subtitle="My custom subcription"
    >
      <FormWizard.TabContent title="Personal details" icon="ti-user">

        <h3>First Tab</h3>
        <p>Some content for the first tab</p>
      </FormWizard.TabContent>
      <FormWizard.TabContent title="Additional Info" icon="ti-settings">
        <h3>Second Tab</h3>
        <p>Some content for the second tab</p>
      </FormWizard.TabContent>
      <FormWizard.TabContent title="Last step" icon="ti-check">
        <h3>Last Tab</h3>
        <p>Some content for the last tab</p>
      </FormWizard.TabContent>
    </FormWizard>
     {/* add style */}
     <style>{`
        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css");
      `}</style>
    </>
  );
}

On this page