import LayoutMdx from "@/components/shared/LayoutMdx";
import Image from "next/image";
import { Callout } from "@/components/shared/Callout";
import HeroAnimation from "@/components/shared/HeroAnimation.tsx";
import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx";
import HeaderImage from "/images/SEO/Best React Form Library and Builder 2023 to create and build forms surveys easy and fast.png";
import GithubStars from "/images/SEO/Stars - best open source react survey builder 2023 comparison of github repository stars for form builder library.png";
import Winner from "/images/SEO/Winner comparison best React survey Library and Builder 2023 2022.png";

export const meta = {
  title: "Best React Form Library 2023 (easy form creation)",
  description:
    "What is the best form & survey library for React? React forms and surveys can be pretty annoying. We compared three form builder libraries in 2023.",
};

_Building forms in React natively is pretty annoying. Different input mechanisms, validations, data transformations, initial default values... it never ends. Today we will look at tools which makes all of this a whole lot easier. Let’s have a look!_

<Image
  src={HeaderImage}
  alt="Best React form library builder comparison between Formik Formbricks and React Form Builder 2"
  className="rounded-lg"
/>

We’re bringing you three different solutions with different pros and cons. But first...

<Callout title="What's your objective?" type="note">
  Do you want to build a highly customized form optimized to the last millisecond? Do you want a slick,
  multi-page survey? Or do you need a visual editor to have your users create forms? Anyways, we've got you
  covered!
</Callout>

## What we compare: Ease of form creation, custom styling and additional work required

We have tested 12 different libraries to share the 3 most compelling ones with you. In order to build exactly the form you envision in the shortest amount of time possible, we shine light one these three aspects of the contending React form libraries:

### 1. Ease of building forms

Here we looked at the overall developer experience and the “completeness” of the solution. In other words: Will you be able to build the form you want just with this library? And how fast?

### 2. Ease of custom styling

In many cases forms have to have certain look & feel to match the application you are building. Here we look at how easy it is to get this look & feel done.

### 3. Additional work required to access data

When the form is done the next question comes up: Where do I pipe the submissions to? And how can I or someone else analyze them? Here we look at how quickly you can achieve your ultimate goal which is not creating forms but gathering and accessing qualitative data.

Now that we have this cleared out of the way, let’s look at how popular the solutions are:

<Image
  src={GithubStars}
  alt="Comparison of GitHub Stars of the best react form builder libraries 2023"
  className="rounded-lg"
/>

As you can pretty well see, **Formik** plays in a different league. Launched 4 years ago, it has accumulated over 31k stars - kudos!

**React Form Builder 2** is almost as old as Formik but never took off. However, very recently it is more actively developed and starts picking up traction (6k weekly NPM downloads).

**Formbricks** is a pretty new repository which collected 1.1k stars over the past couple of weeks.

Let’s have a closer look!

## Closer look: Who is competing?

### 1. Formbricks React Form Library

The Formbricks [React Library](/react-form-library) is the newests kid on the block. While still early, it looks very promising. It uses the impressive performance of React Hook Forms with the objective to make it faster and easier to use. With a modern developer experience and a growing number of HTML and non-HTML question-types, it’s a sweet option for most use cases.

<Callout title="No backend needed" type="note">
Even though Formbricks React works as a standalone solution, the full power is unleashed when using it with the [self-hostable dashboard](/formbricks-hq). Setup webhooks, integrations & email notifications or directly view at your data.

</Callout>

### 2. Formik

No React form generator comparison post can do without Formik. Formik is alongside React Hook Forms by far the most popular library to build forms in React (5M weekly downloads combined). It’s fast, it’s comprehensive and it’s battletested. It comes with input validation, formatting, masking, arrays, and error handling.

### 3. React Form Builder 2

The React Form Builder 2 adds a visual builder to the mix. It comes with React Drag and Drop out of the box that interfaces with a JSON endpoint to load and save generated forms via a schema. It contains 16 question types ranging from star rating question to a signature field. The updated version 2 can be extended with custom components easily. It is a hobby project which picked up quite a bit of traction recently.

<Callout title="In development" type="warning">
  The Formbricks React Library is currently in alpha testing. Most features are still in development. Follow
  us on [Twitter](https://twitter.com/formbricks) to stay uptodate on the release!
</Callout>

##

# Overview

Before we get into the details, here is the overview for you:

| React Library        | Ease of building forms | Ease of custom styling | Additional work required |
| -------------------- | ---------------------- | ---------------------- | ------------------------ |
| Formbricks React     | ⭐⭐⭐⭐               | ⭐⭐⭐⭐               | ⭐⭐⭐⭐⭐               |
| Formik               | ⭐⭐⭐                 | ⭐⭐⭐⭐               | ⭐⭐⭐                   |
| React Form Builder 2 | ⭐⭐⭐⭐               | ⭐⭐                   | ⭐⭐                     |

## Ease of building forms

When you made a decision on which React Library to use, the last thing you want is to go out and look for another package just because your initial choice lacks e.g. a slider component.

**Formbricks React** currently offers 8 question types and keeps adding more in a fast pace. Check out [the repository](https://formbricks.com/github) for more details.

**React Form Builder** comes with 16 questions types out of the box. It includes star-rating questions, NPS questions, etc. Additionally, the second version makes it really easy to add your custom components to it, if you want.

**Formik** only supports standard HTML question types out of the box. Anything non-HTML (like a date picker, sliders, rating questions) you have to build yourself or find compatible packages for.

## Ease of custom styling

When it comes to custom styling, the options differ quiet a bit. Let’s start with React Form Builder 2 as it is the most limited:

**React Form Builder 2** uses Bootstrap so within the realms of Bootstrap you are free to make changes. If you don’t want to use Bootstrap, you’ll have a hard time styling your form and form builder.

**Formik** works smoothly with Tailwind, if you know how to set it up. In a nutshell, you can pass predefined tailwind styles from the parent component to avoid repetition and keep our form file tidy. [Here is a tutorial which touches upon it](https://dev.to/przpiw/build-elegant-forms-reactformik-tailwind-54d8). Here is a sneak peak:

```jsx
export const LoginForm = ({styles}) => (
    <Formik>
      <Form>
        <label className={styles.label} htmlFor='Email'>
          Email
        </label>
        <Field className={styles.field} id='email' name='email' />
        <ErrorMessage component='a' className={styles.errorMsg} name='email' />
        <label className={styles.label} htmlFor='Email'>
          Password
        </label>
        <Field className={styles.field} id='password' name='password' />
        <ErrorMessage
          component='a'
          className={styles.errorMsg}
          name='password'
        />
        <div className='mt-8'>
          <button type='submit' className={styles.button}>
            Login
          </button>
        </div>
      </Form>
    </Formik>
```

**Formbricks React** was built with a great developer experience in mind. There is a native Tailwind support so you can style your components with “className” like you’re used to in React:

```jsx
<FormElement type="text" name="name" label="Your name" className="rounded-sm" />
```

Not using Tailwind? Maybe you should 😛 Jokes aside, you can also pass a custom style sheet and Formbricks React will apply it to your form. As soon as the React Lib is in public beta, we’ll add a step-by-step tutorial [in our docs](/docs).

## Additional work required

Building your form or survey is only the first step. What happens with the qualitative data after your respondents hit “Submit”?

### React Form Builder

Unfortunately, the data handling is not part of the scope of the React Form Builder 2 package.

### Formik (Formium) & Formbricks

Not many know that Formik has a commercial counterpart called Formium. Formium offers a versatile submission API where you can pipe your submissions to and take it from there.

Formbricks has a very similar offer called Formbricks HQ which lets you forward form responses via email or integrate with third-party tools. Here is a comparison of their free plans:

| Feature                   | Formium (free) | Formbricks HQ (free) |
| ------------------------- | -------------- | -------------------- |
| Free submissions / month  | 100            | 500                  |
| File Uploads              | 100MB          | 200MB                |
| Auto Responder            | ✅             | ⚙️                   |
| Email forwarding          | ✅             | ✅                   |
| Custom Email Templates    | ✅             | ⚙️                   |
| Multiple Email Recipients | ✅             | ✅                   |
| Custom Mail Server        | ✅             | ⚙️                   |
| Webhooks                  | ✅             | ✅                   |
| Airtable Integration      | ✅             | ⚙️                   |
| Google Sheets Integration | ✅             | ⚙️                   |
| Zapier Integration        | ✅             | ⚙️                   |
| Automated Workflows       | ❌             | ⚙️                   |
| Easy self-hosting         | ❌             | ✅                   |
| Can be used in EU?        | ❌             | ✅                   |
| Last feature shipped      | 2020           | Nov 2022             |

<Callout title="In development" type="note">
  The Formbricks HQ is currently in alpha testing. Most features are still in development. Follow us on
  [Twitter](https://twitter.com/formbricks) to stay uptodate on the release!
</Callout>

Overall, both tools have a very similar set of features. However, Formium has not been further developed over the past two years whereas Formbricks shows quite some ambition to offer a full suite of form and survey solutions on the one open-source platform.

<Callout title="Formium no option for EU-based companies" type="warning">
  
Since Formium is hosted in the US and operated by a US entity, European companies and institutions cannot use Formium without running the legal risk of violating the data privacy of the respondents.

</Callout>
##
# Results

### 3rd place

[React Form Builder 2](https://github.com/kiho/react-form-builder) has a unique differentiator: A visual form builder. If this is essential for what you're building, this is your choice.7

### 2nd place

[Formik](https://formik.org/) has a lot of strengths - and a few weaknesses. It is very customizable and comes with a powerful validation engine. Many developers are very happy with the reduced complexity compared to building forms natively in React. However, it isn't very easy to get started with for junior developers. Lastly, it causes a lot of rerenders, something that React Hook Form solved better.

### 1st place

It's still verrry early for [Formbricks](/react-form-library). However, the approach looks promising as it makes working with forms and surveys in React a lot easier. The React Library packs a lot of powerful features which makes it by far the easiest option for coding forms in React. The upcoming Formbricks HQ takes setting up a backend off developers plate completely. The modularity and extendability makes it a future-proof choice.

<Image
  src={Winner}
  alt="Best React form library builder comparison between Formik Formbricks and React Form Builder 2"
  className="rounded-lg"
/>

Follow us on [Twitter](https://twitter.com/formbricks) or [join our Discord community](https://formbricks.com/discord) to stay uptodate on the progress.

<MdxTryItCTA />

export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
