Skip to main content

Custom Title Template

info

You can customize the title and subtitle of the form wizard by passing a function to the title prop. The function should return a JSX or TSX element.

Custom Title

Custom Subtitle

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/dist/style.css";

export default function FormWizardSample() {
  const handleComplete = () => {
    console.log("Form completed!");
    // Handle form completion logic here
  };
  const customTitleTemplate = () => {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "1rem",
        }}
      >
        <h2
          style={{
            color: "red",
          }}
        >
          Custom Title
        </h2>
        <p
          style={{
            color: "purple",
          }}
        >
          Custom Subtitle
        </p>
      </div>
    );
  };

  return (
    <>
      <FormWizard
        onComplete={handleComplete}
        title={customTitleTemplate()}
        color="red"
        stepSize="lg"
      >
        <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>
    </>
  );
}