Mobx React Form

Reactive MobX Form State Management
Alternatives To Mobx React Form
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Mobx React Form1,077107262 days ago198June 19, 202245mitTypeScript
Reactive MobX Form State Management
Formstate37013268 months ago38July 20, 20228mitTypeScript
❤️ Form state so simple that you will fall in love 🌹
React Native Starter Kit225
5 years ago5JavaScript
5 days ago95October 05, 202123mitTypeScript
Mobx State Tree Form-library
React Forms Mobx54
7 years ago2mitJavaScript
Example app to be used with the article "Handling React Forms with Mobx Observables":
Reactive Mobx Form47
1a year ago70September 29, 20217mitTypeScript
Reactive forms for applications running on React and MobX
Smashing Form3822 years ago13July 01, 202019TypeScript
MobX powered forms in React
Formstate X3325 months ago27November 08, 20228mitTypeScript
Manage state of your form with ease.
Mobx Form Validate30616 years ago3December 17, 20164JavaScript
Mobx React Form Devtools3010616 days ago31February 26, 20194mitTypeScript
DevTools for MobX React Form
Alternatives To Mobx React Form
Select To Compare

Alternative Project Comparisons

DocumentationLive DemoDemo CodeTutorialJoin Discord Channel

MobX React Form

Reactive MobX Form State Management

GitHub Workflow Status (with branch) Codecov Coverage npm node GitHub license Downloads Downloads Backers on Open Collective Sponsors on Open Collective



  • Extensibles Validation Plugins.
  • Sync & Async Validation (w/ Promises & automatic errors).
  • Nested Fields (w/ Serialization & Validation).
  • Nested Forms (w/ Nested Submission & Validation Hooks).
  • Event Hooks, Event Handlers & Validation Hooks
  • Observers & Interceptors
  • Bindings for custom Components.
  • Support for Material UI, React Widgets, React Select & more.
  • Dedicated DevTools Package.

Quick Start

Edit form-quickstart

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

See Validation Plugins for more info on supported packages.

Below we are creating a plugins object using the validatorjs package to enable DVR functionalities (Declarative Validation Rules).

import dvr from 'mobx-react-form/lib/validators/DVR';
import validatorjs from 'validatorjs';

const plugins = {
  dvr: dvr(validatorjs)

Define the Form Fields

Define the fields as a collection with a rules property for the validation.

const fields = [{
  name: 'email',
  label: 'Email',
  placeholder: 'Insert Email',
  rules: 'required|email|string|between:5,25',
}, {
  name: 'password',
  label: 'Password',
  placeholder: 'Insert Password',
  rules: 'required|string|between:5,25',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  placeholder: 'Confirm Password',
  rules: 'required|string|same:password',

You can also define fields as an object.

Define the Validation Hooks

const hooks = {
  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  onError(form) {
    alert('Form has errors!');
    // get all form errors
    console.log('All form errors', form.errors());

Initialize the Form

Simply pass the fields, plugins and hooks objects to the constructor

import MobxReactForm from 'mobx-react-form';

const myForm = new MobxReactForm({ fields }, { plugins, hooks });

Pass the myForm to a react component

The package provide some built-in and ready to use Event Handlers:

onSubmit(e), onClear(e), onReset(e) & more...

import React from 'react';
import { observer } from 'mobx-react';

export default observer(({ myForm }) => (
  <form onSubmit={myForm.onSubmit}>
    <label htmlFor={myForm.$('email').id}>
    <input {...myForm.$('email').bind()} />

    {/* ... other inputs ... */}

    <button type="submit" onClick={myForm.onSubmit}>Submit</button>
    <button type="button" onClick={myForm.onClear}>Clear</button>
    <button type="button" onClick={myForm.onReset}>Reset</button>


Other Field Props are available. See the docs for more details.

Extending the Form class

See how to implement the same configuration of this quickstart extending the Form class


  1. Fork the repository
  2. Make applicable changes (with tests!)
  3. To run tests: yarn test
  4. Ensure builds succeed: yarn run build
  5. Commit via yarn to run pre-commit checks: yarn run commit

New Issues

When opening new issues, provide the setup of your form in a CodeSandbox.

These issues, and the ones which provides also PR with failing tests will get higher priority.


This project exists thanks to all the people who contribute.


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Popular Form Projects
Popular Mobx 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.