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!

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

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:

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.

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.

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

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

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.

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.

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