Best React Form Library 2023 (easy form creation)

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!

Best React form library builder comparison between Formik Formbricks and React Form Builder 2

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

What's your objective?

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!

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:

Comparison of GitHub Stars of the best react form builder libraries 2023

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 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.

No backend needed

Even though Formbricks React works as a standalone solution, the full power is unleashed when using it with the self-hostable dashboard. Setup webhooks, integrations & email notifications or directly view at your data.

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.

In development

The Formbricks React Library is currently in alpha testing. Most features are still in development. Follow us on Twitter to stay uptodate on the release!

Overview

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

React LibraryEase of building formsEase of custom stylingAdditional 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 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. Here is a sneak peak:

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:

<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.

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:

FeatureFormium (free)Formbricks HQ (free)
Free submissions / month100500
File Uploads100MB200MB
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 shipped2020Nov 2022

In development

The Formbricks HQ is currently in alpha testing. Most features are still in development. Follow us on Twitter to stay uptodate on the release!

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.

Formium no option for EU-based companies

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.

Results

3rd place

React Form Builder 2 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 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. 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.

Best React form library builder comparison between Formik Formbricks and React Form Builder 2

Follow us on Twitter or join our Discord community to stay uptodate on the progress.

What are you waiting for?

Try it right now!

Dive right in or browse docs for examples. Questions? Join our Discord, we’re happy to help

npm install @formbricks/react