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 ([email protected]) 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