Forms in React

Articles & Tutorials

React Form Validation With Formik And Yup (smashingmagazine.com)
Oct 12, 2020
In this article, we’ll learn how Formik handles the state of the form data, validates the data, and handles form submission.
  • Nefe Emadamerho-Atori
Controlled Inputs Using React Hooks (dmitripavlutin.com)
Sep 29, 2020
There are 2 approaches to access the value of an input element in React. In the first approach, named uncontrolled input, you access the value from a reference to the input element. The second approach, which I like because it doesn’t use references, is using a controlled input. Let’s see how to design controlled inputs using React hooks.
  • Dmitri Pavlutin
React Native form validations with Formik and Yup (blog.logrocket.com)
Sep 17, 2020
In this post, we are going to go through creating a few forms using Formik. Formik is a simple React/React Native form library that helps with handling form state, input validation, formatting, error handling, form submission, amongst other things.
  • Kitavi Joseph
Formik vs Plain React for Forms – Worth it? (bitnative.com)
Aug 19, 2020
I typically use plain React for forms. But I just converted a React form to use Formik.
Why react-hook-form is my new favorite form library (swizec.com)
Aug 03, 2020
Forms are fun. They start simple then blow up in your face.
React Hook Form VS Formik (blog.bitsrc.io)
Jun 15, 2020
A comprehensive comparison of the two libraries, with examples.
  • Nathan Sebhastian
The ultimate roundup of React form validation solutions (blog.logrocket.com)
May 26, 2020
In this article, we’re going to take a look at some of the most popular solutions for form management and validation in React.
  • Wern Ancheta
Creating forms in React in 2020 (blog.logrocket.com)
May 18, 2020
This article will show you a few different ways to handle form values in React. We’ll look at useState, custom Hooks, and, finally, no state at all!
  • Kristofer Selbekk
Lessons In Multi-Step Form With React & Material UI (dev.to)
May 10, 2020
When it comes to a multi-step form with React. I had trouble searching for related materials. On how to do it as I was implementing a survey form for one of my projects.
  • Max Ong Zong Bao
Creating React Forms with Formik (blog.bitsrc.io)
Apr 30, 2020
How to speed up your React form development with Formik.
  • John Au-Yeung
Using Formik to Handle Forms in React (css-tricks.com)
Apr 28, 2020
We’re going to build a form together in this post. We’ll start with a React component then integrate Formik while demonstrating the way it handles state, validation, and submissions.
  • Adebiyi Adedotun
React Hook Form — An Elegant Solution to Forms in React (blog.bitsrc.io)
Apr 22, 2020
How to use react-hook-form to build clear and maintainable React forms.
  • Mahesh Haldar
How to Build Custom Forms with React Hooks (telerik.com)
Mar 31, 2020
Creating forms in React has become so easy now. We're going to learn how we can create custom forms using Hooks, and remove the necessity of downloading a ton of libraries for our applications.
  • Leonardo Maldonado
Quickly build schema-based forms in React with uniforms (blog.logrocket.com)
Mar 23, 2020
In this tutorial, we’ll demonstrate how you can use uniforms to efficiently build schema-based forms in React.
  • Godwin Ekuma
You May Not Need Controlled Form Components (swyx.io)
Mar 10, 2020
Using the Name attribute in React Forms.
How To Use Netlify Forms With Gatsby (dev.to)
Mar 01, 2020
Using Netlify's built-in form handling with Gatsby should be simple and intuitive, but sadly it's not that simple. Well it is, it just requires some extra configuration not detailed in the documentation. So let’s get started!
  • Travis Ramos
How to Build Forms with React the Easy Way (telerik.com)
Feb 14, 2020
In this article, we’ll take a step a back and discuss the challenges inherent to building forms with just React, such as state management and validation, and then how to solve them with the KendoReact Form component.
  • TJ VanToll
Building a Fully-Featured Form Component in React: KendoReact Form Example (telerik.com)
Feb 07, 2020
Looking to build a form component in React? It can get complicated, but there are tools we can use to make life easier. Read on for an example of how to build React forms with KendoReact, which easily takes care of the tedious aspects of React forms.
  • Blanca Mendizábal Perelló
Build more accessible forms with React Icons (blog.logrocket.com)
Jan 24, 2020
The goal of this post is to help you understand how to build more accessible React forms by using the popular react-icons library and the very accessible React components made available by the ReachUI library.
  • Peter Ekene Eze
Build better forms with React Native UI components (blog.logrocket.com)
Dec 28, 2019
In this post, we will demonstrate how to build different performant React Native forms with native React Native UI components.
  • Peter Ekene Eze
Yup, you should use React Hook Form (medium.com)
Dec 20, 2019
My biggest complaint about React is forms. Not because I think React took the wrong approach in how forms are implemented in React, but because it’s the most challenging problem in using React.
  • Evan Williams
Handling React Forms and Validation with Formik and Yup (blog.bitsrc.io)
Nov 28, 2019
Using Formik to simplify the building of React forms, while staying away from magic.
  • Aayush Jaiswal
React Hook Form vs. Formik: A technical and performance comparison (blog.logrocket.com)
Oct 30, 2019
Formik outperformed Redux Form in terms of size, best practices, and performance, but in this article, we will see how Formik measures up against the new kid on the block, React Hook Form. We will compare the two libraries and determine who will emerge as the victor in the end.
  • Siegfried Grimbeek
Comparing React form builders: Formik v. Unform (blog.logrocket.com)
Oct 07, 2019
The more modern the application, the more likely developers will need to use special features and helpful hints to ensure demanding clients are happy with their user experience.
  • Diogo Souza
Demonstrating Reusable React Components in a Form (css-tricks.com)
Oct 02, 2019
Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application.
  • Kingsley Silas
Forms in React (telerik.com)
Sep 05, 2019
Form Development in React comes down to three things: Data, Validations, and Submission. See how to handle these yourself or using Formik to make things simpler.
Handling complex form state using React Hooks (itnext.io)
Aug 29, 2019
An alternative to some goodness of this.setState()
  • Aditya Loshali
React Form Validation Using React Hooks (hackernoon.com)
Jul 07, 2019
In this article I’m going to share with you on how I created my own form validation using React hooks.
  • Vince Llauderes
Building better React forms with Formik (blog.logrocket.com)
Jun 28, 2019
Building forms with React involves setting up state as the container for user data and props as the means to control how state is updated using user input.
  • Nathan Sebhastian
Creating Your Own React Validation Library: The Developer Experience (Part 3) (smashingmagazine.com)
May 30, 2019
This final part of this series will focus on improving the user experience for the people that will use our validation library: the developers.
  • Kristofer Selbekk
Creating Your Own React Validation Library: The Features (Part 2) (smashingmagazine.com)
May 23, 2019
While the next part will focus on improving the developer experience, today’s article will focus on adding more features to what was created in Part 1.
  • Kristofer Selbekk
Creating Your Own React Validation Library: The Basics (Part 1) (smashingmagazine.com)
May 16, 2019
Ever wondered how validation libraries work? This article will tell you how to build your very own validation library for React step by step.
  • Kristofer Selbekk
How to create email chips in pure React (medium.freecodecamp.org)
Apr 18, 2019
Imagine that you, the good-looking developer (yes, I’m talking to you!), want to build an invitation form where users can add one or more email addresses to a list and send a message to all of them.
  • Andreas Remdt
Validating a Login Form With React (scotch.io)
Apr 04, 2019
For almost every form that you create, you will want some sort of validation. In React, working with and validating forms can be a bit verbose, so in this article we are going to use a package called Formik to help us out!
  • James Quick
Upload a File from a React Component (upmostly.com)
Mar 24, 2019
There are multiple ways to upload a file using React. I’m going to explain the steps to upload a single file, multiple files, and files and data in React.
  • James King
No more tears, handling Forms in React using Formik, part II (itnext.io)
Mar 23, 2019
This is the continuation of our first part on Formik, the amazing Forms library for React.
  • Christoffer Noring
Creating Forms In React With Formik And Yup (blog.bitsrc.io)
Mar 20, 2019
Forms in the ReactJS can be a pain with all those repetition and business logic at the same time. Formik handles form state and Yup handles validation so we can focus our business logic.
  • Anshul Goyal
No more tears, handling Forms in React using Formik, part I (itnext.io)
Mar 20, 2019
In this article we will cover forms overview, discussing Forms in general and different form libraries.
  • Christoffer Noring
Form Validation Using Custom React Hooks (upmostly.com)
Mar 04, 2019
Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. Read on to learn how!
  • James King
Using Custom React Hooks to Simplify Forms (upmostly.com)
Feb 23, 2019
Use custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. Read on to learn more!
  • James King
Build Better React Forms with Formik (telerik.com)
Feb 22, 2019
Formik is an alternative and more efficient way of building React forms, keeping your React form logic organized and making testing, refactoring, and overall reasoning a breeze. We demonstrate how to leverage the features of Formik to build better React forms.
Up and Running with React Form Validation (telerik.com)
Feb 21, 2019
Join me as we walk through the easiest way I know how to add custom form validation in React in the fewest steps. Get up to speed creating your own custom form validation in your React components.
  • Eric Bishard
Back to the Browser: React Form Validation with the DOM API (itnext.io)
Feb 18, 2019
Last week I wrote an article about how we can build a form validation hook with React Hooks. But just after finishing the article I started to think “Ok, but we know that almost all the validation in this example could be done just using the DOM API”, and that is the story of how this article was born.
  • Sergio Marin
Compound.Components and Context (sid.studio)
Feb 15, 2019
Today, let’s talk about forms. You have probably read a bunch of articles about state management in forms, this isn’t one of them. Instead, I’d like to talk about the design and API of forms.
The Magic of React-Based Multi-Step Forms (css-tricks.com)
Feb 15, 2019
The problem is that multi-step forms — while reducing perceived complexity on the front end — can feel complex and overwhelming to develop. But, I’m here to tell you that it’s not only achievable, but relatively straightforward using React as the base. So, that’s what we’re going to build together today!
  • Nathan Sebhastian
Form Validation with React Hooks (itnext.io)
Feb 14, 2019
There are several React hooks available right now and I plan to detail in some of them, but this article is about building a custom hook only using the useState hook to validate a form data.
  • Sergio Marin
How to Get Started With React Hooks: Controlled Forms (medium.freecodecamp.org)
Feb 04, 2019
Let’s go ahead to code a simple form first in a Stateful Component. We’ll rewrite the same form using Hooks and you can decide which one you like better.
  • Kevin Okeh
React Dropzone and File Uploads in React (upmostly.com)
Feb 04, 2019
In this tutorial, we’ll learn how to use React Dropzone to create an awesome file uploader. Keep reading to learn more about react-dropzone.
  • James King
Image Uploading: Using React and Node to Get The Images Up (codeburst.io)
Feb 04, 2019
For any developer who envisions building an application, uploading images is a major component they have to take into account.
  • Tarique Ejaz
Please stop building inaccessible forms (and how to fix them) (blog.kentcdodds.com)
Feb 04, 2019
I regularly find inaccessible forms. In this post we’ll check out one of the common accessibility problems and fix it.
How I built an async form validation library in ~100 lines of code with React Hooks (medium.freecodecamp.org)
Jan 08, 2019
Form validation can be a tricky thing. There are a surprising number of edge cases as you get into the guts of a form implementation.
  • Austin Malerba
How to autogenerate forms in React and Material-UI with MSON (medium.freecodecamp.org)
Oct 22, 2018
Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout. And, MSON comes with a bunch of cool stuff like date pickers, masked fields and field collections.
  • Geoff Cox
Getting Started with React – An Overview and Walkthrough (taniarascia.com)
Aug 19, 2018
An overview and walkthrough of fundamental React concepts, such as components, state, and props, as well as submitting forms, pulling data from an API, and deploying a React app to production.
  • Tania Rascia
Better Understanding Forms in React (medium.com)
Jun 23, 2018
The goal for this post is to get a better understanding of how to build forms in React.
  • Ali Sharif
Sensible React Forms, with Govern (jamesknelson.com)
Apr 02, 2018
Luckily, React forms don’t have to be awkward. In fact, they can be downright easy. And the trick is simple: you just need to understand that form state isn’t like other state.
An imperative guide to forms in React (blog.logrocket.com)
Feb 22, 2018
So, you just got started with React and you’ve started building React apps and you’re wondering, how do I work with forms in React? Fret not.
  • Yomi Eluwande
Easily Build Forms in React Native (medium.com)
Sep 20, 2017
Forms are pretty simple, right? Yeah! But there can be quite a few moving parts involved. A few things you might have to take care of…
  • Spencer Carli
Form Validation in React (medium.com)
Sep 10, 2017
I wrote my own react validation code, and am sharing it with you.
  • Michael Ries

Video Guides & Talks

Using the KwesForms form service with React (youtube.com)
Oct 22, 2020
In this video we'll learn how to add the KwesForms form service to a React / Next.js app. We'll create custom validation, learn about answer piping, and talk about notification and confirmation emails.
Creating a User Registration form with react-hook-form (youtube.com)
Jul 31, 2020
We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.
Formik — React Native Fashion (youtube.com)
Jul 22, 2020
In this series, we are building a React Native App from 0 to 1.
Text Inputs — React Native Fashion (youtube.com)
Jul 17, 2020
In this series, we are building a React Native App from 0 to 1.
Login — React Native Fashion (youtube.com)
Jul 16, 2020
In this series, we are building a React Native App from 0 to 1.
React Multi-Step Form Tutorial: Using Formik, Yup and material-ui (youtube.com)
Jun 08, 2020
In order to validate our forms, we will use Yup with Formik validationSchema. We show how to validate fields that depend on other fields in different steps of the form. In order to add a nice look and feel to our form, we will use Material-UI stepper component in order to display in which step we are at the moment.
  • Bruno Antunes
Formik 2 Tutorial | React Forms (youtube.com)
Nov 07, 2019
Learn how to use Formik 2 to build forms in React.js. I go over how to do validation, create custom fields, and array fields.
React Form Best Practices (youtube.com)
Oct 14, 2019
Learn how I build forms in React.
A sneak peak at React Form v4, how to use it, and how it works! (youtube.com)
Sep 17, 2019
Come get a sneak peak at the new React Form v4 (currently in alpha).
  • Tanner Linsley
How I built a useField React Hook for forms... and why form-related hooks are so hard! (youtube.com)
Sep 13, 2019
In this stream, I'll walk you through how I built a useField hook using nothing but React Hooks. I'll also talk about why I think form state is so hard to handle in any UI and my plans to make it easier.
  • Tanner Linsley
How to use Autosuggest in React (youtube.com)
Aug 13, 2019
This video shows how to use the React Autosuggest library to show a dynamic list of countries which is loaded from a JSON endpoint. We'll use it within a Formik form and also cover how to tie Autosuggest into Formik and its validations.
Forms in React with Formik (youtube.com)
Aug 12, 2019
This video covers how to use Formik to create and manage forms in React. We'll cover getting user input, validating it with Yup, and then handling the form submission.
Forms in React - Vanilla React (youtube.com)
Aug 06, 2019
In this video we'll cover Forms in Vanilla React (no additional packages).
Let’s Simplify Your Complex Forms (youtube.com)
Jul 31, 2019
In this talk, we’ll go over the existing solutions, how they stack up against each other, and what their limitations are.
  • Kenza Iraki
Formal Forms with State Machines (youtube.com)
Jul 04, 2019
In this talk, we'll explore the current React form landscape and learn how hooks and state machines can be used to create abstract models of complex forms that greatly reduce dependencies on restrictive form libraries or complex custom components.
  • David Khourshid
Build forms with GraphQL (youtube.com)
May 30, 2019
We will explore an alternative way to manage forms using types and GraphQL.
  • Charly Poly
React Typescript Material UI Form (youtube.com)
Apr 16, 2019
Learn how to make a form in React using Typescript, Material UI, and Formik.
Effortless Forms In React (youtube.com)
Apr 09, 2019
I'm going to be showing off a new library that I found that makes writing forms in React insanely simple.
Saving Form State in Local Storage with React (youtube.com)
Mar 15, 2019
I've got a contact form that I need to save to local storage so if people refresh the page and come back it's still around. Let's see how that goes!
Building a contact form with Lambda Functions (youtube.com)
Mar 14, 2019
My contact form leaves some things to be desired with the workflow on my end so I'm going to make a serverless function for my contact form so it'll do what I want it to do.
Multi Step Form With React & Material UI (youtube.com)
Nov 05, 2018
In this project we will build a React multi step form with multiple componenets including user & personal details, confirmation and success. We will use Material UI as well.
Taming Forms in React (youtube.com)
Sep 19, 2018
In this talk, we're going deep on forms in React. I'll explore managing validation, error messages, and working with 3rd-party inputs and introduce you to Formik, a tiny form helper that lets you do all the fun stuff I just mentioned and more.
Build forms with React in 2 minutes (youtube.com)
May 04, 2018
Build simple forms with React controlled components and keep your API declarative.
How to make a Contact Form in Gatsby with Netlify (youtube.com)
Mar 10, 2018
In this video we build a contact form that will work with Netlify's form service.
React Image Upload Made Easy (youtube.com)
Feb 15, 2018
React.js is a JavaScript library that can be used to build highly engaging web apps. In these apps, you often have to upload images or files. Learn how easy it actually is to do that!
A practical guide to Redux Form (youtube.com)
Nov 08, 2017
Forms are hard in any framework, but they are extra complicated in React due to the recommended method of using "controlled inputs", inputs where all of their state is managed by the developer, not by the DOM or the React framework itself.
  • Erik Rasmussen
Formik (youtube.com)
Aug 18, 2017
Forms in React can be verbose, repetitive, and messy. Managing the state of values, errors, and touched can make matters even worse. Formik adds a level of organization to your forms that allows for easier implementation, integrated validation, and a consistent interface to add third party components. Formik also makes it easy to abstract common form behavior into primitives that you can share and compose throughout your application.

Books & Guides

React Distilled (sebhastian.com)
Mar 05, 2019
The book distills the most important topics to learn about React, so you don't have to painstakingly browse the web, looking for pieces of React knowledge to build a fully working application.
  • Nathan Sebhastian

Courses & Video Series

React.js Essential Training (lynda.com)
Dec 18, 2018
React is a great choice for dynamic, data-driven user experiences. Learn how to create browser-based apps and websites with the component-based React.js library.
React Front To Back (udemy.com)
Jul 23, 2018
Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore.
Manage React Form State with redux-form (egghead.io)
May 08, 2018
In this course, we are going to use the redux-form package to create a form whose state is easy and enjoyable to manage
  • Rory Smith

Podcast Episodes

Erik Rasmussen on Final Form (reactpodcast.com)
Jul 18, 2019
This week we sit with Erik Rasmussen to discuss forms in React. We talk about his library redux-form and it's evolution to final-form — a framework agnostic approach to making dynamic forms easy.

Libraries

react-hook-form (react-hook-form.now.sh)184
v3.21.11
Aug 08, 2019
React hook form validation without the hassle.
    redux-form (redux-form.com)11216
    v8.2.5
    Jul 27, 2019
    A Higher Order Component using react-redux to keep form state in a Redux store.
    • Erik Rasmussen
    • Florent Cailhol
    • Kenneth Skovhus
    informed (joepuzzo.github.io)279
    v2.11.8
    Jul 16, 2019
    Informed is an extensive, simple, and efficient solution for creating basic to complex forms in react.
    • Joe Puzzo
    react-jsonschema-form (mozilla-services.github.io)6014
    v1.7.0
    Jul 16, 2019
    A React component for building Web forms from JSON Schema.
    • Nicolas Perriault
    • Ethan Glasser-Camp
    • Ashwin Ramaswami
    formik (jaredpalmer.com)13826
    v1.5.8
    Jul 11, 2019
    Build forms in React, without the tears
    rfv (github.com)1
    v0.0.27
    Jul 10, 2019
    React form validator and form handler.
    • Ozgur Ozer
    react-final-form (github.com)3823
    v6.3.0
    Jun 19, 2019
    High performance subscription-based form state management for React.
    • Erik Rasmussen
    @kevinwolf/formal (react-formal.netlify.com)844
    v0.1.1
    Jun 07, 2019
    Elegant form management primitives for the react hooks era.
    • Kevin Wolf
    react-filepond (pqina.nl)324
    v7.0.1
    Feb 05, 2019
    A handy FilePond adapter component for React.
    • Rik Schennink
    formsy-react (github.com)526
    v1.1.5
    Sep 26, 2018
    A form input builder and validator for React JS.
    • Christian Alfoni
    • Dmitry Semigradsky
    redux-form-material-ui (github.com)771
    v4.3.4
    Apr 07, 2018
    A set of wrapper components to facilitate using Material UI with Redux Form
    • Erik Rasmussen