Formsy React

A form input builder and validator for React JS
Alternatives To Formsy React
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Hook Form33,9831271,3373 days ago951September 23, 202211mitTypeScript
📋 React Hooks for form state management and validation (Web + React Native)
Formik32,0912,4551,8076 days ago201June 02, 2021799apache-2.0TypeScript
Build forms in React, without the tears 😭
Redux Form12,61411,7811,24324 days ago235November 17, 2021492mitJavaScript
A Higher Order Component using react-redux to keep form state in a Redux store
React Jsonschema Form12,45756628113 hours ago103December 16, 2019300apache-2.0TypeScript
A React component for building Web forms from JSON Schema.
Formily9,3341197 days ago209September 20, 202211mitTypeScript
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
React Final Form7,21750038425 days ago76April 01, 2022385mitJavaScript
🏁 High performance subscription-based form state management for React
X Render5,68313120 hours ago310September 21, 202210TypeScript
🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Unform4,515334 days ago16February 19, 202173mitTypeScript
Performance-focused API for React forms 🚀
Survey Library3,559371518 hours ago384September 20, 2022473mitTypeScript
Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
Designable2,661173 days ago203February 28, 202258mitTypeScript
🧩 Make everything designable 🧩
Alternatives To Formsy React
Select To Compare

Alternative Project Comparisons


GitHub release CI Coverage Status GitHub contributors Typescript Types included

A form input builder and validator for React.

Quick Start API 1.x API


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

  1. Build any kind of form element components. Not just traditional inputs, but anything you want, and get that validation for free
  2. Add validation rules and use them with simple syntax
  3. Use handlers for different states of your form. (onSubmit, onValid, etc.)
  4. Pass external errors to the form to invalidate elements (E.g. a response from a server)
  5. Dynamically add form elements to your form and they will register/unregister to the form


yarn add formsy-react react react-dom and use with webpack, browserify, etc.

Formsy component packages

1.x to 2.x Upgrade Guide

The 2.0 release fixed a number of legacy decisions in the Formsy API, mostly a reliance on function props over value props passed down to wrapped components. However, the API changes are minor and listed below.

  • getErrorMessage() => errorMessage
  • getErrorMessages() => errorMessages
  • getValue() => value
  • hasValue() => hasValue
  • isFormDisabled(): => isFormDisabled
  • isFormSubmitted() => isFormSubmitted
  • isPristine() => isPristine
  • isRequired() => isRequired
  • isValid(): => isValid
  • showError() => showError
  • showRequired() => showRequired

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) {
    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.

  render() {
    // An error message is passed only if the component is invalid
    const errorMessage = this.props.errorMessage;

    return (
        <input onChange={this.changeValue} type="text" value={this.props.value || ''} />

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) {
    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('', {
      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}>

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".

3. More

See the API for more information.


  • Fork repo
  • yarn
  • yarn lint runs lint checks
  • yarn test runs the tests
  • npm run deploy build and release formsy


Check out our Changelog and releases


The MIT License (MIT)

Popular Form Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Form Validation