A curated list of the best Forms libraries.
1. formily
In React, the whole tree rendering performance problem of the form is very obvious in the controlled mode. Especially for the scene of data linkage, it is easy to cause the page to be stuck. To solve this problem, we have distributed the management of the state of each form field, which significantly improves the performance of the form operations. At the same time, we deeply integrate the JSON Schema protocol to help you solve the problem of back-end driven form rendering quickly.
Features
- 🚀 High performance, fields managed independently, rather rerender the whole tree.
- 💡 Integrated Alibaba Fusion and Ant Design components are guaranteed to work out of the box.
- 🎨 JSON Schema applied for BackEnd. JSchema applied for FrontEnd. Two paradigms can be converted to each other.
- 🏅 Side effects are managed independently, making form data linkages easier than ever before.
- 🌯 Override most complicated form layout use cases.
2. vest
Vest - Declarative validations framework.
Vest is a form-validation framework inspired by unit testing libraries like Mocha or Jest; It is designed to be easy to use and easy to learn by introducing their declarative syntax.
The idea behind Vest is that your validations can be described as a suite - a contract that reflects your form or feature structure. Vest is framework agnostic, meaning it can be used with any UI framework, or without any framework at all.
Using Vest for form validation can reduce bloat, improve feature readability and maintainability.
test('username', 'Username is required', () => {
enforce(data.username).isNotBlank();
});
test('username', 'Username must be at least 3 chars', () => {
enforce(data.username).longerThanOrEquals(3);
});
test('username', 'Username already taken', async () => {
await doesUserExist(data.username);
});Installation
npm i vestMotivation
Writing forms is an integral part of building web apps, and even though it may seem trivial at first - as your feature grows over time, so does your validation logic grows in complexity.
Vest tries to remediate this by separating validation logic from feature logic, so it's easier to maintain over time and refactor when needed.
Why Vest?
💡 Vest is easy to Learn. Vest adopts the syntax and style of unit testing frameworks, so you can leverage the knowledge you already have to write your form validations.
🎨 Vest is framework agnostic. You can use Vest with any UI framework out there.
🧠 Vest takes care of all the annoying parts for you. It manages its validation state, handles async validations, and much more.
🧩 Vest is extendable. You can easily add new kinds of validations to Vest according to your needs.
♻️ Validation logic in Vest can be shared across multiple features in your app.
Getting Started
Here are some code sandboxes to get you started:
3. react-final-form
Zero dependencies (that affect your bundle size).
✅ Only peer dependencies: React and
🏁 Final Form
✅ Opt-in subscriptions - only update on the state you need!
✅ 💥 3.0k gzipped 💥
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.
4. formsy-react
A form input builder and validator for React.
Background
christianalfoni wrote an article on forms and validation with React,
Nailing that validation with React JS,
the result of that was this library.
The main concept is that forms, inputs, and validation are done very differently across developers and projects. This
React component aims to be that “sweet spot” between flexibility and reusability.
This project was originally located at christianalfoni/formsy-react
if you're looking for old issues.
What You Can Do
- Build any kind of form element components. Not just traditional inputs, but anything you want, and get that
validation for free - Add validation rules and use them with simple syntax
- Use handlers for different states of your form. (
onSubmit,onValid, etc.) - Pass external errors to the form to invalidate elements (E.g. a response from a server)
- Dynamically add form elements to your form and they will register/unregister to the form
Install
yarn add formsy-react react react-dom and use with webpack, browserify, etc.
Quick Start
1. Build a Formsy element
// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';
class MyInput extends React.Component {
constructor(props) {
super(props);
this.changeValue = this.changeValue.bind(this);
}
changeValue(event) {
// setValue() will set the value of the component, which in
// turn will validate it and the rest of the form
// Important: Don't skip this step. This pattern is required
// for Formsy to work.
this.props.setValue(event.currentTarget.value);
}
render() {
// An error message is passed only if the component is invalid
const errorMessage = this.props.errorMessage;
return (
<div>
<input onChange={this.changeValue} type="text" value={this.props.value || ''} />
<span>{errorMessage}</span>
</div>
);
}
}
export default withFormsy(MyInput);withFormsy is a Higher-Order Component that
exposes additional props to MyInput. See the API documentation to view a complete list of the
props.
2. Use your Formsy element
import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';
export default class App extends React.Component {
constructor(props) {
super(props);
this.disableButton = this.disableButton.bind(this);
this.enableButton = this.enableButton.bind(this);
this.state = { canSubmit: false };
}
disableButton() {
this.setState({ canSubmit: false });
}
enableButton() {
this.setState({ canSubmit: true });
}
submit(model) {
fetch('http://example.com/', {
method: 'post',
body: JSON.stringify(model),
});
}
render() {
return (
<Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
<MyInput name="email" validations="isEmail" validationError="This is not a valid email" required />
<button type="submit" disabled={!this.state.canSubmit}>
Submit
</button>
</Formsy>
);
}
}This code results in a form with a submit button that will run the submit method when the form is submitted with a
valid email. The submit button is disabled as long as the input is empty (required) and the value is
not an email (isEmail). On validation error it will show the message: "This is not a valid email".
5. react-formal
Better form validation and value management for React. Provides minimal wiring while also allowing for complete input flexibility.
Built on yup and react-input-message.
Install
npm i -S react-formal yup(don't like the yup but like how the form works? Try: topeka)
Use
For more complete api documentations, live examples, and getting started guide check out the documentation site.
react-formal uses a yup schema to update and validate form values. It treats the form like an input (representing an object) with a value and onChange. The form can be controlled or uncontrolled as well, just like a normal React input.
var yup = require('yup')
, Form = require('react-formal')
var modelSchema = yup.object({
name: yup.object({
first: yup.string().required('Name is required'),
last: yup.string().required('Name is required')
}),
dateOfBirth: yup.date()
.max(new Date(), 'You can be born in the future!')
})
// ...in a component
render() {
return (
<Form
schema={modelSchema}
value={this.state.model}
onChange={model => this.setState({ model })}
>
<fieldset>
<legend>Personal Details</legend>
<Form.Field name='name.first'/>
<Form.Message for='name.first'/>
<Form.Field name='name.last'/>
<Form.Message for='name.last'/>
<Form.Field name='dateOfBirth'/>
<Form.Message for='dateOfBirth'/>
</fieldset>
<Form.Submit type='submit'>Submit</Form.Submit>
</Form>
)
}6. react-jsonschema-form
A simple React component capable of using JSON Schema to declaratively build and customize web forms.
Supported Themes
7. react-hook-form
Here are its Features:
- Built with performance, UX and DX in mind
- Embraces native HTML form validation
- Out of the box integration with UI libraries
- Small size and no dependencies
- Support Yup, Zod, AJV, Superstruct, Joi, Vest, class-validator, io-ts, nope and custom build
Install
npm install react-hook-formQuickstart
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('firstName')} />
<input {...register('lastName', { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<input {...register('age', { pattern: /d+/ })} />
{errors.age && <p>Please enter number for age.</p>}
<input type="submit" />
</form>
);
}8. uniforms
A set of React libraries for building forms from every schema.
API |
Quick Start |
Playground |
What's included?
- Automatic forms generation
- Fields capable of rendering every schema
- Helper for creating custom fields with one line
- Inline and asynchronous form validation
- Integrations with various schemas:
- JSON Schema
- GraphQL
- SimpleSchema
- [email protected]
- And any other - only a small wrapper is needed!
- Wide range of themes:
- AntD theme
- Bootstrap3 theme
- Bootstrap4 theme
- Bootstrap5 theme
- Material theme
- MUI theme
- Semantic UI theme
- plain HTML theme