Tab without Background 🆕

:::warning You must set removeBackgroundTabColor transparent of the tab background color. Note: If using dark mode set dynamic color for removeBackgroundTabColor based on the dark mode. :::

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
        removeBackgroundTab={true}
        removeBackgroundTabColor="white"
        onComplete={handleComplete}
      >
        <FormWizard.TabContent title="Personal details" icon="">
          <h3>First Tab</h3>
          <p>Some content for the first tab</p>
        </FormWizard.TabContent>
        <FormWizard.TabContent title="Additional Info" icon="">
          <h3>Second Tab</h3>
          <p>Some content for the second tab</p>
        </FormWizard.TabContent>
        <FormWizard.TabContent title="Last step" icon="">
          <h3>Last Tab</h3>
          <p>Some content for the last tab</p>
        </FormWizard.TabContent>
      </FormWizard>
      {/* add style */}
      <style>{`
        .react-form-wizard .wizard-icon-container .wizard-icon  span {
          color: darkBlue !important;
        }
      `}</style>
    </>
  );
}

First Tab

Code

On this page