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
import type { Schema, Cond, Form, Return } from "@formity/react";


import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";


import {
  FormView,
  FormLayout,
  TextField,
  YesNo,
  Next,
  Back,
} from "./components";


import { Controller } from "./controller";


export type Values = [
  Form<{ working: boolean }>,
  Cond<{
    then: [
      Form<{ company: string }>,
      Return<{
        working: boolean;
        company: string;
      }>,
    ];
    else: [
      Form<{ searching: boolean }>,
      Return<{
        working: boolean;
        searching: boolean;
      }>,
    ];
  }>,
];


export const schema: Schema<Values> = [
  {
    form: {
      values: () => ({
        working: [true, []],
      }),
      render: ({ values, onNext, onBack, getState, setState }) => (
        <Controller
          step="working"
          onNext={onNext}
          onBack={onBack}
          getState={getState}
          setState={setState}
        >
          <FormView
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                working: z.boolean(),
              })
            )}
          >
            <FormLayout
              heading="Are you currently working?"
              description="We would like to know if you are working for a company"
              fields={[<YesNo key="working" name="working" label="Working" />]}
              button={<Next>Next</Next>}
            />
          </FormView>
        </Controller>
      ),
    },
  },
  {
    cond: {
      if: ({ working }) => working,
      then: [
        {
          form: {
            values: () => ({
              company: ["", []],
            }),
            render: ({ values, onNext, onBack, getState, setState }) => (
              <Controller
                step="company"
                onNext={onNext}
                onBack={onBack}
                getState={getState}
                setState={setState}
              >
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      company: z.string(),
                    })
                  )}
                >
                  <FormLayout
                    heading="At what company?"
                    description="We would like to know the name of the company"
                    fields={[
                      <TextField
                        key="company"
                        name="company"
                        label="Company"
                      />,
                    ]}
                    button={<Next>Next</Next>}
                    back={<Back />}
                  />
                </FormView>
              </Controller>
            ),
          },
        },
        {
          return: ({ working, company }) => ({
            working,
            company,
          }),
        },
      ],
      else: [
        {
          form: {
            values: () => ({
              searching: [false, []],
            }),
            render: ({ values, onNext, onBack, getState, setState }) => (
              <Controller
                step="searching"
                onNext={onNext}
                onBack={onBack}
                getState={getState}
                setState={setState}
              >
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      searching: z.boolean(),
                    })
                  )}
                >
                  <FormLayout
                    heading="Are you looking for a job?"
                    description="If you are looking for a job, we would like to know"
                    fields={[
                      <YesNo
                        key="searching"
                        name="searching"
                        label="Searching"
                      />,
                    ]}
                    button={<Next>Next</Next>}
                    back={<Back />}
                  />
                </FormView>
              </Controller>
            ),
          },
        },
        {
          return: ({ working, searching }) => ({
            working,
            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, Form, Return } from "@formity/react";


import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";


import { FormView, FormLayout, Next, Listbox } from "./components";


import { Controller } from "./controller";


export type Values = [Form<{ travel: string }>, Return<{ travel: string }>];


export const schema: Schema<Values> = [
  {
    form: {
      values: () => ({
        travel: ["once-a-year", []],
      }),
      render: ({ values, onNext, onBack, getState, setState }) => (
        <Controller
          step="travel"
          onNext={onNext}
          onBack={onBack}
          getState={getState}
          setState={setState}
        >
          <FormView
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                travel: z.string(),
              })
            )}
          >
            <FormLayout
              heading="How often do you travel?"
              description="We would want to know how often you travel"
              fields={[
                <Listbox
                  key="travel"
                  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>Next</Next>}
            />
          </FormView>
        </Controller>
      ),
    },
  },
  {
    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