Conditional Newsletter Form

Shows how to hide/show fields dynamically based on user input.

Live demo

conditional-newsletter.tsx

import { z } from "zod";
import { FormFactory } from "@enlolab/forms";

export const ConditionalNewsletter = FormFactory({
  formId: "conditional-newsletter",
  fields: {
    subscribe: {
      type: "checkbox",
      label: "Subscribe to newsletter",
      schema: z.boolean()
    },
    frequency: {
      type: "select",
      label: "Frequency",
      options: [
        { label: "Weekly", value: "weekly" },
        { label: "Monthly", value: "monthly" }
      ],
      hidden: values => !values.subscribe,
      schema: z.string().optional()
    }
  },
  steps: {
    step1: { id: "step1", fields: ["subscribe", "frequency"] }
  },
  successMessage: values => values.subscribe ? "Subscribed!" : "Preferences saved."
});