Forms in React

Articles & Tutorials

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

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