How I Build Forms Quickly in React
Tags: react, forms, javascript
Published: 2022-08-03 18:46:54

---
title: How I Build Forms Quickly in React
published: true
date: 2022-08-03 18:28:00 UTC
tags: React,forms,js
canonical_url: https://webdevwithseb.com/2022/08/03/the-best-react-form-library-2022/?utm_source=rss&utm_medium=rss&utm_campaign=the-best-react-form-library-2022
---

Forms are everywhere in web apps. Whenever you log in, make a post on social media, or buy something online, you’re using a form.

Despite their ubiquity, building forms requires a lot of attention and care. Form fields should only accept specific types of data, perform validations, and show errors on invalid input. As more fields are added, the complexity of the form grows.

This work is repetitive and tiring. Wouldn’t it be great if we could make form building trivial?

## Enter RJSF

I’ve [tried](https://react-hook-form.com/) [lots](https://formik.org/) [of](https://react-hook-form.com/) [form](https://github.com/final-form/react-final-form) [libraries](https://github.com/tannerlinsley/react-form), but none solve the burden of easy, rapid form building as well as [RJSF](https://github.com/rjsf-team/react-jsonschema-form) does.

What makes forms difficult is the management of JSX, state, validations, and errors. As you add more fields, you also need to manage more of the aforementioned things, which can get overwhelming fast.

RJSF solves this by being a declarative form builder. Instead of manually defining the form and validation logic, you describe your form using [json-schema](https://json-schema.org/), and RJSF handles the rest.

I’ve been using it in production with my clients to great effect. To show you how it works, we’ll make a quick sign up form. Familiarity with json-schema is helpful, so here is a [5 minute primer](https://json-schema.org/blog/posts/json-schema-in-5-minutes).

## Making a Sign Up Form

We first need to collect the user’s email and password. This is what the RJSF react code looks like:

```
<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string"
      }
    }
 }}
/>
```

![](https://i0.wp.com/webdevwithseb.com/wp-content/uploads/2022/08/image-4.png)

From this small bit of code, RJSF has built a heading, text inputs, and submit button. Cool, but this is far from done. Some improvements we can make:

- Make email and password required fields
- Enforce minimum password length
- email field should only accept emails
- password input should be obfuscated

Let’s add these in.

### Make email and password required fields:

```
<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
         },
      password: {
        type: "string"
      },
    },
    required: ["email", "password"]
  }}
/>
```

### Enforce minimum password length

```
<Form
  schema={{
  title: "Signup",
  properties: {
    email: {
      type: "string"
    },
    password: {
      type: "string",
      minLength: 8
    },
  },
  required: ["email", "password"]
}}
/>
```

### email field should only accept emails

```
<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    }
  }}
/>
```

### password input should be obfuscated itself

```
<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    },
    "password": {
      "ui:widget": "password"
    }
  }}
/>
```

And here is the final result ([View the code here](https://replit.com/@sbmsr/The-Best-React-Forms-Library?v=1#src/SignupForm.jsx).)

<video autoplay controls loop muted src="https://webdevwithseb.com/wp-content/uploads/2022/08/Kapture-2022-08-03-at-10.42.59.webm"></video>
_RJSF supports HTML native error handling, as well as custom JS error handling._

## What Else Can RJSF Do?

This is just scratching the surface. RJSF has much more to offer.

### Themes

Native support for popular libraries like chakra, semantic-ui, material design, and [more](https://github.com/rjsf-team/react-jsonschema-form#supported-themes).

<video autoplay controls loop muted src="https://webdevwithseb.com/wp-content/uploads/2022/08/2.webm"></video>

### Complex Fields

Multi-select dropdowns, check boxes, configurable lists, and much more are supported out of the box. If you need, you can also create your own [custom form fields](https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields/).

<video autoplay controls loop muted src="https://webdevwithseb.com/wp-content/uploads/2022/08/4.webm"></video>

#### Custom Validations & Errors

Add custom validations to your form. Here is a custom “password match” validation:

```
<Form 
  validate={(formData, errors) => {
    if (formData.pass1 !== formData.pass2) {
      errors.pass2.addError("Passwords don't match");
    }
    return errors;
  }}
  schema={{
    type: "object",
    properties: {
      pass1: {type: "string", minLength: 3},
      pass2: {type: "string", minLength: 3},
    }
  }}
/>
```

<video autoplay controls loop muted src="https://webdevwithseb.com/wp-content/uploads/2022/08/3.webm"></video>

## What are the RJSF Cons?

While RJSF is great, it also comes with downsides:
- **Bundle Size**
The RJSF core package is .25 MB, which is large! Upon close inspection, [you can see that 33% of the bundle is attributed to the  AJV JSON Schema validation library](https://bundlephobia.com/package/@rjsf/core@4.2.2). The maintainers are working on [removing this dependency](https://github.com/rjsf-team/react-jsonschema-form/issues/869#issuecomment-1207286286) in a coming release.

- **Large Forms are Slow**
I noticed this firsthand when building a dropdown with over 50 options. My form was super slow because of this. Reducing the options to ~15 seemed to solve it.

RJSF is fantastic if you're still figuring out the data your form is collecting. However, the docs mention that "if you have a priori knowledge of your data and want a toolkit for generating forms for it, you might want to look elsewhere".

## Conclusion

This was a quick dive into RJSF, my favorite react library for rapid form development.

If you’d like to try it out, [check out this playground](https://rjsf-team.github.io/react-jsonschema-form/). It has tons of examples that show the power of RJSF. If you dig it, help the maintainers out by giving them a star on [GitHub](https://github.com/rjsf-team/react-jsonschema-form)⭐

__The post [The Best React Form Library (2022)](https://webdevwithseb.com/2022/08/03/the-best-react-form-library-2022/) first appeared on [💻 Web Dev With Seb](https://webdevwithseb.com).__