MobX Formkit

Reactive MobX Form State Management — extensible validation, nested fields, event hooks, and bindings for any UI framework, with full TypeScript support.

Documentation • Quick Start • Live Demo • Demo Code • NPM • AI Skills • Discord

MobX Formkit is a form state management library built on MobX observables. The core is UI-agnostic — it depends only on mobx and renders in React, Vue 3, Lit, Angular, Solid, or vanilla JS through the matching MobX binding. Define your fields declaratively and get reactivity, validation, change tracking, and component bindings automatically.

Read the full documentation or jump straight to the Quick Start.

Features

• 8 Validation Plugins — DVR, VJF, AJV, YUP, JOI, ZOD, VALIBOT & VINEJS: sync & async, extendable, and mixable on the same form.
• Nested Fields & Arrays — deeply nested field structures with dot notation, dynamic add/remove/move, ordered ArrayMap collections, and full serialization.
• Event Hooks & Handlers — full lifecycle control: onInit, onChange, onFocus, onBlur, onSubmit, onSuccess, onError & more.
• UI-Agnostic Core — the same Form instance renders in React, Vue 3, Lit, Angular, Solid, Octane, or vanilla JS with a MobX binding.
• Field Props Bindings — one-line bind() for standard inputs, plus custom rewriters & templates for Material UI, Ant Design, React Aria, Headless UI, React Widgets, React Select, Chakra UI, PrimeReact & more.
• TypeScript First — generics (Form<F>), typed field access, and autocomplete for nested field paths.
• Reactive Computed Props — functional field props that re-evaluate automatically when their MobX dependencies change.
• Forms Composer — orchestrate multiple forms for wizards and multi-step flows with batch validate/submit/clear.
• Tiny & SSR-Ready — ~8 kB gzip, tree-shakeable, zero DOM dependencies; works with Next.js, Remix, Vite & any SSR setup.
• MobX 5, 6 & 7 — one peer dependency range: ^5.15.0 || ^6.0.0 || ^7.0.0.
• DevTools — a dedicated DevTools package & browser extension to inspect form state, fields, and validation in real time.
• AI Agent Skills — installable skill files for Cursor, Windsurf, Claude Code, Codebuff & Copilot.

Quick Example

npm install --save mobx-formkit

import { Form } from "mobx-formkit";
import dvr from "mobx-formkit/lib/validators/DVR";
import validatorjs from "validatorjs";

const plugins = {
  dvr: dvr({ package: validatorjs }),
};

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",
    type: "password",
  },
  {
    name: "passwordConfirm",
    label: "Password Confirmation",
    placeholder: "Confirm Password",
    rules: "required|string|same:password",
    type: "password",
  },
];

const hooks = {
  onSuccess(form) {
    alert("Form is valid! Send the request here.");
  },
  onError(form) {
    alert("Form has errors!");
  },
};

const form = new Form({ fields }, { plugins, hooks });

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

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

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

    <p>{form.error}</p>
  </form>
));

Follow the full Quick Start guide or the class-based setup for the complete walkthrough.

Documentation

Topic	Links
Getting Started	Quick Start · Class-based Setup · TypeScript · UMD Setup
Form & Fields	Form Instance · Form Options · Defining Fields
Actions	Form Actions · Get, Set & Update · Add, Delete & Move · Validation & Submit
Validation	Choosing a Plugin · Plugins & Packages · Validation Lifecycle
Events	Event Handlers · Event Hooks · Validation Hooks
Bindings	Default Bindings · Custom Bindings
API Reference	Form Properties · Form Methods · Fields Properties · Fields Methods
Advanced	Overview · Wizard (multi-step) · Sortable Lists · File Upload
Extra	Computed Props · Input & Output Converters · Forms Composer · Recipes & Patterns · Troubleshooting & FAQ
Guides	Migration Guide · Error Handling · Performance & SSR · Render Engine Support
Ecosystem	DevTools · AI Agent Skills · Live Demo

Legacy: mobx-react-form (MRF)

MobX Formkit is the successor of mobx-react-form (MRF). The legacy package has been renamed and deprecated on npm — the codebase and its API continue here. To migrate, swap the package and update your imports:

npm uninstall mobx-react-form
npm install --save mobx-formkit

As of August 2026, the final legacy release (mobx-react-form@7.1.0) still sees ~8.0k downloads/week, ~47.4k downloads/month, and ~664k downloads/year (npm API). If you are still on MRF, this is the drop-in replacement.

See the Migration Guide on the docs for breaking changes across major versions.

Contributing

1. Fork the repository
2. Make applicable changes (with tests!)
3. To run tests: npm run test
4. Ensure builds succeed: npm run build
5. Commit and run pre-commit checks: npm 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.

Contributors

This project exists thanks to all the people who contribute.

Backers

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

Sponsors

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

License

MIT © Claudio Savino