Complete Feature Showcase

Form wizard with 3 steps. Currently on step 1.

Sample 15: Complete Showcase

All features combined

• 1
  Personal Info
• 2
  Select Plan
• 3
  Terms and Conditions

Personal Information

Code

import React from "react";
import FormWizard, {
  type FormWizardMethods,
  type FormWizardSchema,
} from "react-form-wizard-component";
import "react-form-wizard-component/dist/style.css";

export default function Sample15CompleteFeatureShowcase() {
  const showcaseRef = React.useRef<FormWizardMethods>(null);

  const showcaseSchema: FormWizardSchema = {
    initialData: { name: "", email: "", plan: "basic", terms: false },
    steps: [
      {
        id: "personal",
        title: "Personal Info",
        validate: ({ data }) =>
          data.name && data.email ? true : "Name and email required",
        content: (
          <div>
            <h4>Personal Information</h4>
            <input
              className="form-control"
              type="text"
              placeholder="Name"
              onChange={(e) =>
                showcaseRef.current?.setData({
                  ...showcaseRef.current.getData(),
                  name: e.target.value,
                })
              }
            />
            <input
              className="form-control"
              type="email"
              placeholder="Email"
              style={{ marginTop: 8 }}
              onChange={(e) =>
                showcaseRef.current?.setData({
                  ...showcaseRef.current.getData(),
                  email: e.target.value,
                })
              }
            />
          </div>
        ),
      },
      {
        id: "plan",
        title: "Select Plan",
        content: (
          <div>
            <h4>Choose Your Plan</h4>
            <select
              onChange={(e) =>
                showcaseRef.current?.setData({
                  ...showcaseRef.current.getData(),
                  plan: e.target.value,
                })
              }
            >
              <option value="basic">Basic - $9/month</option>
              <option value="premium">Premium - $29/month</option>
              <option value="enterprise">Enterprise - $99/month</option>
            </select>
          </div>
        ),
      },
      {
        id: "premium-extra",
        title: "Premium Features",
        condition: ({ data }) =>
          data.plan === "premium" || data.plan === "enterprise",
        content: (
          <div>
            <h4>Premium Benefits</h4>
            <p>Advanced features included.</p>
          </div>
        ),
      },
      {
        id: "terms",
        title: "Terms and Conditions",
        validate: ({ data }) => (data.terms === true ? true : "Please accept terms"),
        content: (
          <div>
            <h4>Final Step</h4>
            <label>
              <input
                type="checkbox"
                onChange={(e) =>
                  showcaseRef.current?.setData({
                    ...showcaseRef.current.getData(),
                    terms: e.target.checked,
                  })
                }
              />
              I accept the terms and conditions
            </label>
          </div>
        ),
      },
    ],
  };

  return (
    <>
      <div style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: 16 }}>
        <FormWizard
          ref={showcaseRef}
          title="Sample 15: Complete Showcase"
          subtitle="All features combined"
          schema={showcaseSchema}
          layout="horizontal"
          stepSize="md"
          color="#6366f1"
          darkMode={false}
          showProgressBar={true}
          onComplete={(data?: any) => {
            console.log("Wizard completed with data:", data);
          }}
          onTabChange={({ prevIndex, nextIndex, stepId }) => {
            console.log("Tab changed:", { prevIndex, nextIndex, stepId });
          }}
          nextButtonTemplate={(next) => (
            <button className="wizard-btn" onClick={next} style={{ backgroundColor: "#6366f1" }}>
              Continue →
            </button>
          )}
          finishButtonTemplate={(finish) => (
            <button className="wizard-btn" onClick={finish} style={{ backgroundColor: "#10b981" }}>
              Complete Setup
            </button>
          )}
        />

        <div style={{ margin: "12px 0", display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="wizard-btn" onClick={() => showcaseRef.current?.prevTab()}>
            Back
          </button>
          <button className="wizard-btn" onClick={() => showcaseRef.current?.nextTab()}>
            Next
          </button>
          <button className="wizard-btn" onClick={() => showcaseRef.current?.reset()}>
            Start Over
          </button>
        </div>
      </div>
      <style>{`
        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css");
        .form-control {
          height: 36px;
          padding: 0.375rem 0.75rem;
          font-size: 1rem;
          font-weight: 400;
          line-height: 1.5;
          color: #495057;
          border: 1px solid #ced4da;
          border-radius: 0.25rem;
          width: 100%;
          max-width: 300px;
        }
      `}</style>
    </>
  );
}