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.

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 {
Step,
Layout,
TextField,
YesNo,
NextButton,
BackButton,
} from "@/components";
import { MultiStep } from "@/multi-step";
export type Values = [
Form<{ working: boolean }>,
Cond<{
then: [
Form<{ company: string }>,
Return<{
working: true;
company: string;
}>
];
else: [
Form<{ searching: boolean }>,
Return<{
working: false;
searching: boolean;
}>
];
}>
];
export const schema: Schema<Values> = [
{
form: {
values: () => ({
working: [true, []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="working" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
working: z.boolean(),
})
)}
>
<Layout
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={<NextButton>Next</NextButton>}
/>
</Step>
</MultiStep>
),
},
},
{
cond: {
if: ({ working }) => working,
then: [
{
form: {
values: () => ({
company: ["", []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="company" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
company: z.string().nonempty("Required"),
})
)}
>
<Layout
heading="At what company?"
description="We would like to know the name of the company"
fields={[
<TextField
key="company"
name="company"
label="Company"
/>,
]}
button={<NextButton>Next</NextButton>}
back={<BackButton />}
/>
</Step>
</MultiStep>
),
},
},
{
return: ({ company }) => ({
working: true,
company,
}),
},
],
else: [
{
form: {
values: () => ({
searching: [false, []],
}),
render: ({ values, ...rest }) => (
<MultiStep step="searching" {...rest}>
<Step
defaultValues={values}
resolver={zodResolver(
z.object({
searching: z.boolean(),
})
)}
>
<Layout
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={<NextButton>Next</NextButton>}
back={<BackButton />}
/>
</Step>
</MultiStep>
),
},
},
{
return: ({ searching }) => ({
working: false,
searching,
}),
},
],
},
},
];
Integration

Use With Form Libraries

Formity empowers you to work with your preferred form library, such as React Hook Form, Formik or TanStack 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 { useMultiStep } from "@/multi-step";
interface StepProps {
defaultValues: UseFormProps["defaultValues"];
resolver: UseFormProps["resolver"];
children: ReactElement;
}
export default function Step({ defaultValues, resolver, children }: StepProps) {
const form = useForm({ defaultValues, resolver });
const { onNext } = useMultiStep();
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