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 Form35,2181271,33710 hours ago951September 23, 202211mitTypeScript
📋 React Hooks for form state management and validation (Web + React Native)
Formik32,4112,4551,8074 days ago201June 02, 2021766apache-2.0TypeScript
Build forms in React, without the tears 😭
React Jsonschema Form12,71556628120 hours ago103December 16, 2019287apache-2.0TypeScript
A React component for building Web forms from JSON Schema.
Redux Form12,61111,7811,2432 months ago235November 17, 2021491mitJavaScript
A Higher Order Component using react-redux to keep form state in a Redux store
Formily9,6371194 days ago209September 20, 202214mitTypeScript
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
React Final Form7,25750038417 days ago76April 01, 2022390mitJavaScript
🏁 High performance subscription-based form state management for React
X Render6,0931318 hours ago310September 21, 202213TypeScript
🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Unform4,514332 months ago16February 19, 202173mitTypeScript
Performance-focused API for React forms 🚀
Survey Library3,61937155 hours ago384September 20, 2022501mitTypeScript
Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
7 days ago29mitTypeScript
🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Svelte Form and Vue Form.
Alternatives To Formsy React
Select To Compare

Alternative Project Comparisons


This project has moved. Starting from 1.0.0 onward, develeopment will continue at

formsy-react GitHub release Build Status

A form input builder and validator for React JS

How to use API Examples


I wrote an article on forms and validation with React JS, Nailing that validation with React JS, the result of that was this extension.

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.

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. Ex. "onSubmit", "onError", "onValid" etc.

  4. Pass external errors to the form to invalidate elements

  5. You can dynamically add form elements to your form and they will register/unregister to the form

Default elements

You can look at examples in this repo or use the formsy-react-components project to use bootstrap with formsy-react, or use formsy-material-ui to use Material-UI with formsy-react.


  1. Download from this REPO and use globally (Formsy) or with requirejs
  2. Install with npm install formsy-react and use with browserify etc.
  3. Install with bower install formsy-react


Check out releases

Older changes

How to use

See examples folder for examples. Codepen demo.

Complete API reference is available here.

Formsy gives you a form straight out of the box

  import Formsy from 'formsy-react';

  const MyAppForm = React.createClass({
    getInitialState() {
      return {
        canSubmit: false
    enableButton() {
        canSubmit: true
    disableButton() {
        canSubmit: false
    submit(model) {
    render() {
      return (
        <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>

This code results in a form with a submit button that will run the submit method when the submit button is clicked with a valid email. The submit button is disabled as long as the input is empty (required) or the value is not an email (isEmail). On validation error it will show the message: "This is not a valid email".

Building a form element (required)

  import Formsy from 'formsy-react';

  const MyOwnInput = React.createClass({

    // Add the Formsy Mixin
    mixins: [Formsy.Mixin],

    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    changeValue(event) {

    render() {
      // Set a specific className based on the validation
      // state of this component. showRequired() is true
      // when the value is empty and the required prop is
      // passed to the input. showError() is true when the
      // value typed is invalid
      const className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;

      // An error message is returned ONLY if the component is invalid
      // or the server has returned an error message
      const errorMessage = this.getErrorMessage();

      return (
        <div className={className}>
          <input type="text" onChange={this.changeValue} value={this.getValue()}/>

The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.

Related projects


  • Fork repo
  • npm install
  • npm run examples runs the development server on localhost:8080
  • npm test runs the tests


The MIT License (MIT)

Copyright (c) 2014-2016 PatientSky A/S

Popular Form Projects
Popular Reactjs Projects
Popular User Interface Components Categories

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