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,
  Controller,
} from "@/features/form";


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, ...rest }) => (
        <Controller step="working" {...rest}>
          <FormView
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                working: z.boolean(),
              }),
            )}
          >
            <FormLayout
              size="sm"
              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, ...rest }) => (
              <Controller step="company" {...rest}>
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      company: z.string(),
                    }),
                  )}
                >
                  <FormLayout
                    size="sm"
                    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, ...rest }) => (
              <Controller step="searching" {...rest}>
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      searching: z.boolean(),
                    }),
                  )}
                >
                  <FormLayout
                    size="sm"
                    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,
          }),
        },
      ],
    },
  },
];
Integration

Use With Form Libraries

Formity empowers you to work with your preferred form library, such as react-hook-form, formik or @tanstack/react-form, ensuring complete control and flexibility.

How often do you travel?

We would want to know how often you travel

import type { ReactElement } from "react";
import type { UseFormProps } from "react-hook-form";


import { FormProvider, useForm } from "react-hook-form";


import { useController } from "../controller";


interface FormViewProps {
  defaultValues: UseFormProps["defaultValues"];
  resolver: UseFormProps["resolver"];
  children: ReactElement;
}


export default function FormView({
  defaultValues,
  resolver,
  children,
}: FormViewProps) {
  const form = useForm({ defaultValues, resolver });
  const { onNext } = useController();
  return (
    <form onSubmit={form.handleSubmit(onNext)} className="h-full">
      <FormProvider {...form}>{children}</FormProvider>
    </form>
  );
}
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