Explore our main features

Build The Most Powerful Forms, Without The Hassle

Formity is a powerful React library for creating advanced multi-step forms. It enables you to design forms where each step evolves based on the user's previous responses.

Get startedTemplate
website.com

Tell us about yourself

We would want to know a little bit more about you

Powerful logic

Use Powerful Logic

What sets Formity apart is its ability to create highly customizable multi-step forms, offering full control through the use of conditions, loops and variables.

Are you currently working?

We would like to know if you are working for a company

YesNo
const schema: Schema = [
  {
    form: {
      defaultValues: {
        working: [true, []],
      },
      resolver: {},
      render: {
        form: {
          step: "$step",
          defaultValues: "$defaultValues",
          resolver: "$resolver",
          onNext: "$onNext",
          children: {
            formLayout: {
              heading: "Are you currently working?",
              description:
                "We would like to know if you are working for a company",
              fields: [
                {
                  yesNo: {
                    name: "working",
                    label: "Working",
                  },
                },
              ],
              button: {
                next: { text: "Next" },
              },
            },
          },
        },
      },
    },
  },
  {
    cond: {
      if: { $eq: ["$working", true] },
      then: [
        {
          form: {
            defaultValues: {
              company: ["", []],
            },
            resolver: {},
            render: {
              form: {
                step: "$step",
                defaultValues: "$defaultValues",
                resolver: "$resolver",
                onNext: "$onNext",
                children: {
                  formLayout: {
                    heading: "At what company?",
                    description:
                      "We would like to know the name of the company",
                    fields: [
                      {
                        textField: {
                          name: "company",
                          label: "Company",
                        },
                      },
                    ],
                    button: {
                      next: { text: "Next" },
                    },
                    back: {
                      back: { onBack: "$onBack" },
                    },
                  },
                },
              },
            },
          },
        },
        {
          return: {
            working: "$working",
            company: "$company",
          },
        },
      ],
      else: [
        {
          form: {
            defaultValues: {
              searching: [false, []],
            },
            resolver: {},
            render: {
              form: {
                step: "$step",
                defaultValues: "$defaultValues",
                resolver: "$resolver",
                onNext: "$onNext",
                children: {
                  formLayout: {
                    heading: "Are you looking for a job?",
                    description:
                      "If you are looking for a job, we would like to know",
                    fields: [
                      {
                        yesNo: {
                          name: "searching",
                          label: "Searching",
                        },
                      },
                    ],
                    button: {
                      next: { text: "Next" },
                    },
                    back: {
                      back: { onBack: "$onBack" },
                    },
                  },
                },
              },
            },
          },
        },
        {
          return: {
            working: "$working",
            searching: "$searching",
          },
        },
      ],
    },
  },
];
Customizability

Use Your Components

The forms that can be created with this package are completely customizable and there are no constraints when it comes to what components you want to use.

How often do you travel?

We would want to know how often you travel

import type { Schema } from "formity";


const schema: Schema = [
  {
    form: {
      defaultValues: {
        travel: ["once-a-year", []],
      },
      resolver: {},
      render: {
        form: {
          step: "$step",
          defaultValues: "$defaultValues",
          resolver: "$resolver",
          onNext: "$onNext",
          children: {
            formLayout: {
              heading: "How often do you travel?",
              description: "We would want to know how often you travel",
              fields: [
                {
                  listbox: {
                    name: "travel",
                    label: "Travel",
                    options: [
                      { value: "almost-never", label: "Almost never" },
                      { value: "once-a-year", label: "Once a year" },
                      { value: "twice-a-year", label: "Twice a year" },
                    ],
                  },
                },
              ],
              button: {
                next: { text: "Next" },
              },
            },
          },
        },
      },
    },
  },
  {
    return: {
      travel: "$travel",
    },
  },
];
Ready made components

Move even faster with Formity UI

Formity UI is a form template featuring a variety of expertly designed components, making it effortless and straightforward to get started with the package.

Explore template