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.
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.
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, }), }, ], }, },];
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.
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, }), },];
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