Forms are very useful in any web application. Using React we can make our forms much more interactive and less static. So, if you just got started with React and you`ve started building React apps and you are wondering, how do I work with forms in React? here are 27 Essential React Form Components to build all kinds of forms, from simple to complex.
Formik
Using Formik has allowed us to create our own reusable form components which were a large factor in our decision to use the library. It makes creating new forms painless and allows us to test them easily. It aims to remove the complexity and verboseness of forms in React, whilst keeping elements as bare-bones as possible. Integrating Formik for your forms makes managing form state done automatically and locally.
Redux Form
Dealing with forms can be sometimes troublesome. You need to take care of things such as validation, proper type of the fields etc. Redux Form is quite a convenient way to make the implementation of forms easier and quicker.
Formsy React
The main concept is that forms, inputs and validation is done very differently across developers and projects. This extension to React JS aims to be that “sweet spot” between flexibility and reusability.
React Final Form
React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form’s state changes. By default, React Final Form subscribes to all changes, but if you want to fine tune your form to optimized blazing-fast perfection, you may specify only the form state that you care about for rendering your gorgeous UI.
Tcomb Form
React.js powered UI library for developing forms writing less code.
React Drip Form
HoC based React forms state manager, Support for validation and normalization.
Form State
Managing form state in React can be a bit unwieldy sometimes. There are plenty of great solutions already available that make managing forms state a breeze. However, many of those solutions are opinionated, packed with tons of features that may end up not being used, and/or require shipping a few extra bytes! Luckily, the recent introduction of React Hooks and the ability to write custom hooks have enabled new possibilities when it comes sharing state logic. Form state is no exception! This is a small React Hook that attempts to simplify managing form state, using the native form input elements you are familiar with!
React Auto-form
Simplifies getting user input from basic forms via onChange and onSubmit events.
React Multistep
React multistep form component.
Redux Form Material UI
A set of wrapper components to facilitate using Material UI with Redux Form.
React Number Format
React component to format numbers in an input or as a text.
React Input Range
InputRange is a React component allowing users to input numeric values within a specific range. It can accept a single value, or a range of values (min/max). By default, basic styles are applied, but can be overridden depending on your design requirements.
React Star Rating Input
React.js components for entering 0-N stars (N is 5 by default), or displaying 0-N stars.
Uniforms
Bunch of React components and helpers to easily generate and validate forms.
React Payment
React components for credit card and bank account forms, using material-ui.
React Toggle
Elegant, accessible toggle component for React. Also a glorified checkbox.
React Color-tools
A set of tools as React components for working with colors.
React Autosuggest
WAI-ARIA compliant React autosuggest component.
React Aria-menubutton
A fully accessible, easily themeable, React-powered menu button.
React Input-enhancements
The intention of creating this library was to bring input component out of the dropdown/autocomplete/whatever code, so it could be easily replaced with your custom component, and also to split independent functionality into different components, which could be combined with each other (still not quite sure it was worth it, though).
React Mentions
A React component that let’s you mention people in a textarea like you are used to on Facebook or Twitter.
React Tags
A fantastically simple tagging component for your React projects.
React Input-autosize
Auto-resizing input field for React.
Draft Js
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
React Datepicker
A simple and reusable datepicker component for React.
Text Mask
Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything!
React Dropzone
Simple React hook to create a HTML5-compliant drag’n’drop zone for files.
