You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit a605df1
Browse filesBrowse the repository at this point in the historyBrowse files
[](#backers)
22
-
[](#sponsors)
3
+
**Reactive MobX Form State Management** — extensible validation, nested fields, event hooks, and bindings for any UI framework, with full TypeScript support.
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.
33
14
34
-
> **Breaking (UMD):** UMD bundle filenames and script-tag globals changed from
35
-
> `MobxReactForm*` to `MobxFormkit*` — update `<script src>` paths and global
36
-
> references accordingly. There is no alias; APIs are otherwise identical.
15
+
Read the [full documentation](https://foxhound87.github.io/mobx-formkit/) or jump straight to the [Quick Start](https://foxhound87.github.io/mobx-formkit/quick-start).
-**UI-Agnostic Core** — the same `Form` instance renders in [React, Vue 3, Lit, Angular, Solid, Octane, or vanilla JS](https://foxhound87.github.io/mobx-formkit/frameworks) with a MobX binding.
23
+
-**Field Props Bindings** — one-line [`bind()`](https://foxhound87.github.io/mobx-formkit/bindings/) for standard inputs, plus custom rewriters & templates for Material UI, Ant Design, React Aria, Headless UI, React Widgets, React Select, Chakra UI, PrimeReact & more.
24
+
-**TypeScript First** — generics (`Form<F>`), typed field access, and [autocomplete for nested field paths](https://foxhound87.github.io/mobx-formkit/typescript).
25
+
-**Reactive Computed Props** — [functional field props](https://foxhound87.github.io/mobx-formkit/extra/computed-props) that re-evaluate automatically when their MobX dependencies change.
26
+
-**Forms Composer** — [orchestrate multiple forms](https://foxhound87.github.io/mobx-formkit/extra/composer) for wizards and multi-step flows with batch validate/submit/clear.
27
+
-**Tiny & SSR-Ready** — ~8 kB gzip, tree-shakeable, zero DOM dependencies; works with Next.js, Remix, Vite & any [SSR setup](https://foxhound87.github.io/mobx-formkit/performance-ssr).
-**DevTools** — a dedicated [DevTools package & browser extension](https://foxhound87.github.io/mobx-formkit/devtools) to inspect form state, fields, and validation in real time.
30
+
-**AI Agent Skills** — installable [skill files](https://foxhound87.github.io/mobx-formkit/skills) for Cursor, Windsurf, Claude Code, Codebuff & Copilot.
31
+
32
+
## Quick Example
58
33
59
34
```bash
60
35
npm install --save mobx-formkit
61
36
```
62
37
63
-
> **MobX 6 & 7 support**: `mobx-formkit` works with both `mobx@6` and `mobx@7` (peer dependency: `^6.0.0 || ^7.0.0`). For MobX 7 use the matching React bindings (`mobx-react@^10`).
64
-
65
-
#### Choose and Setup a Validation Plugin
66
-
67
-
Below we are creating a `plugins` object using the `validatorjs` package to enable `DVR` functionalities (Declarative Validation Rules).
68
-
69
38
```javascript
39
+
import { Form } from"mobx-formkit";
70
40
importdvrfrom"mobx-formkit/lib/validators/DVR";
71
41
importvalidatorjsfrom"validatorjs";
72
42
73
43
constplugins= {
74
-
dvr:dvr({
75
-
package: validatorjs,
76
-
}),
44
+
dvr:dvr({ package: validatorjs }),
77
45
};
78
-
```
79
-
80
-
> See [Validation Plugins](https://foxhound87.github.io/mobx-formkit/validation/plugins.html) for more info on supported packages.
81
46
82
-
#### Define the Form Fields
83
-
84
-
Define the `fields` as a collection with a `rules` property for the validation.
85
-
86
-
```javascript
87
47
constfields= [
88
48
{
89
49
name:"email",
@@ -106,81 +66,76 @@ const fields = [
106
66
type:"password",
107
67
},
108
68
];
109
-
```
110
-
111
-
> See [Fields Definitions](https://foxhound87.github.io/mobx-formkit/fields/) and all available [Field Props](https://foxhound87.github.io/mobx-formkit/api-reference/fields-properties.html) on the docs.
112
69
113
-
#### Define the Validation Hooks
114
-
115
-
```javascript
116
70
consthooks= {
117
71
onSuccess(form) {
118
72
alert("Form is valid! Send the request here.");
119
-
// get field values
120
-
console.log("Form Values!", form.values());
121
73
},
122
74
onError(form) {
123
75
alert("Form has errors!");
124
-
// get all form errors
125
-
console.log("All form errors", form.errors());
126
76
},
127
77
};
128
-
```
129
-
130
-
> See more on the docs about the [Validation Hooks](https://foxhound87.github.io/mobx-formkit/events/validation-hooks.html) and the [Event Hooks](https://foxhound87.github.io/mobx-formkit/events/event-hooks.html)
131
-
132
-
#### Initialize the Form
133
78
134
-
Simply pass the `fields`, `plugins` and `hooks` objects to the constructor
> Learn more on the docs about the [Form Instance](https://foxhound87.github.io/mobx-formkit/form/) and the [Form Options](https://foxhound87.github.io/mobx-formkit/form/form-options.html)
143
-
144
-
#### Pass the myForm to a react component
145
-
146
-
The package provide some built-in and ready to use Event Handlers:
> See more on the docs about the [Field Props Bindings](https://foxhound87.github.io/mobx-formkit/bindings)
105
+
Follow the [full Quick Start guide](https://foxhound87.github.io/mobx-formkit/quick-start) or the [class-based setup](https://foxhound87.github.io/mobx-formkit/quick-start-class) for the complete walkthrough.
[See how to implement the same configuration of this quickstart extending the Form class](https://foxhound87.github.io/mobx-formkit/quick-start-class.html)
123
+
## Legacy: mobx-react-form (MRF)
182
124
183
-
<br>
125
+
MobX Formkit is the successor of [**mobx-react-form**](https://www.npmjs.com/package/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:
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.
137
+
138
+
See the [Migration Guide](https://foxhound87.github.io/mobx-formkit/migration-guide) on the docs for breaking changes across major versions.
184
139
185
140
## Contributing
186
141
@@ -199,16 +154,21 @@ These issues, and the ones which provides also PR with failing tests will get hi
199
154
### Contributors
200
155
201
156
This project exists thanks to all the people who contribute.
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/mobx-react-form#sponsor)]
168
+
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/mobx-formkit#sponsor)]
0 commit comments