Getting started

Introduction

Take a look at this introduction to have a better idea of what Formity is about.

Overview

Formity is an advanced form-building package designed to help React developers create advanced multi-step forms with ease.

What sets Formity apart from other form libraries is its unique ability to adapt the form's questions based on the user's previous answers.

This powerful feature enables developers to craft highly personalized and interactive forms without the need for complex conditional logic or cumbersome code.

Installation

To install this package you have to run the following command.

npm install @formity/react

Formity integrates seamlessly with popular form libraries like react-hook-form, formik and @tanstack/react-form. For this reason, you would normally install this package along these other packages.

Usage

The core of this package is the Formity component. It renders the multi-step form and these are the most important props:

  • schema: Defines the structure and behavior of the multi-step form.

  • onReturn: A callback function that is triggered when the form is completed.

import { useCallback, useState } from "react";

import { Formity, OnReturn, ReturnValues } from "@formity/react";

import { Data } from "./components";

import { schema, Values } from "./schema";

export default function App() {
  const [values, setValues] = useState<ReturnValues<Values> | null>(null);

  const onReturn = useCallback<OnReturn<Values>>((values) => {
    setValues(values);
  }, []);

  if (values) {
    return <Data data={values} onStart={() => setValues(null)} />;
  }

  return <Formity<Values> schema={schema} onReturn={onReturn} />;
}

To learn how to define the schema and leverage conditional logic, proceed to the next section, where we’ll guide you through the process of creating a dynamic multi-step form.

Tutorial