Getting startedIntroduction

Getting started

Introduction

Define your entire multi-step form as a single, programmable flow.

What is Formity?

Formity is a React library for building multi-step forms as programmable flows that can branch, loop, jump, and track variables across steps, giving you full control over the form's behavior.

Fully type-safe and compatible with React Hook Form, Formik, TanStack Form, and any other form library. It works for onboarding flows, lead capture forms, job applications, and more.

Installation

Terminal
npm install @formity/react

How it works

The core of Formity is the flow, an array of elements that each define a piece of the form's behavior. By combining them, you can build any multi-step form you can imagine.

TSX
const flow: Flow<Schema> = [
  {
    form: {
      fields: () => ({ softwareDeveloper: ["yes", []] }),
      render: ({ fields, next }) => (
        <SoftwareDeveloperForm fields={fields} next={next} />
      ),
    },
  },
  {
    variables: () => ({ language: null }),
  },
  {
    condition: {
      if: ({ softwareDeveloper }) => softwareDeveloper === "yes",
      then: [
        {
          form: {
            fields: () => ({ language: ["", []] }),
            render: ({ fields, back, next }) => (
              <LanguageForm fields={fields} back={back} next={next} />
            ),
          },
        },
      ],
      else: [],
    },
  },
  {
    return: ({ softwareDeveloper, language }) => ({
      softwareDeveloper,
      language,
    }),
  },
];

return <Formity<Schema> flow={flow} onReturn={onReturn} />;

Next steps

Follow the Tutorial to build a multi-step form with conditional logic from scratch.

Tutorial