# foxhound87/mobx-react-form

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/foxhound87-mobx-react-form).**

1,095 stars · 130 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/foxhound87/mobx-react-form
- Homepage: https://foxhound87.github.io/mobx-react-form
- awesome-repositories: https://awesome-repositories.com/repository/foxhound87-mobx-react-form.md

## Topics

`form` `mobx` `observables` `react` `reactive` `state` `validation`

## Description

This project is a reactive state management library designed for handling complex form data and validation logic. It utilizes observable-based patterns to synchronize user interface components with underlying data models, ensuring that form states remain consistent throughout an application. The library provides a structured approach to managing form initialization, field tracking, and lifecycle events.

The library distinguishes itself through its support for deeply nested data structures and hierarchical composition, allowing for recursive validation and dynamic updates within complex object trees. It features a schema-driven validation engine that supports both synchronous and asynchronous rules, alongside middleware-style interception that enables custom logic to monitor or transform data during field updates. Developers can access and manipulate specific fields dynamically using path-based addressing, providing flexibility when working with large or evolving form models.

Beyond core state management, the library includes utilities for data transformation, such as formatting input values and computing field values based on other form data. It offers multi-form orchestration capabilities to coordinate validation and submission across multiple instances, and it remains decoupled from specific presentation layers to allow integration with any user interface component library. The framework also provides built-in tools for monitoring field lifecycle events and debugging internal state transitions.

## Tags

### User Interface & Experience

- [Reactive Form Builders](https://awesome-repositories.com/f/user-interface-experience/form-state-management/reactive-form-builders.md) — Manages complex form data and validation logic using reactive observables to keep user interfaces perfectly synchronized with underlying state.
- [Form Data Binding](https://awesome-repositories.com/f/user-interface-experience/form-data-binding.md) — Connects input components to the underlying state model to handle value updates, focus tracking, and event propagation automatically. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/DOCUMENTATION.md))
- [Computed State Properties](https://awesome-repositories.com/f/user-interface-experience/computed-state-properties.md) — Calculates field values dynamically based on other form data to ensure consistency across related inputs and state.
- [Custom UI Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components.md) — Connects form state to any interface library or standard input elements through standardized property mappings and event handling hooks.
- [Multi-Step Orchestrators](https://awesome-repositories.com/f/user-interface-experience/data-tables/data-entry-forms/complex-form-layouts/multi-step-orchestrators.md) — Coordinates validation, submission, and lifecycle events across multiple related forms to simplify complex multi-step application processes.
- [Field Update Interceptors](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations/form-field-state-integrations/field-update-interceptors.md) — Allows custom logic to monitor, validate, or transform data during field updates before they are applied to the state. ([source](https://foxhound87.github.io/mobx-react-form/docs/extra/mobx-events.html))
- [Multi-Form Orchestrators](https://awesome-repositories.com/f/user-interface-experience/form-submission-management/multi-form-orchestrators.md) — Groups multiple form instances to perform collective actions like batch submission and global validation. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/README.md))
- [Input Data Formatting](https://awesome-repositories.com/f/user-interface-experience/input-data-formatting.md) — Converts field values during input or output operations to ensure data formats match backend requirements or display preferences consistently. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/CHANGELOG.md))
- [Widget Tree Compositions](https://awesome-repositories.com/f/user-interface-experience/nested-ui-composition-patterns/widget-tree-compositions.md) — Organizes form inputs into nested structures that support recursive validation and data serialization for complex object hierarchies.

### Web Development

- [Form Management Libraries](https://awesome-repositories.com/f/web-development/form-management-libraries.md) — Provides a reactive state management library for handling complex form data, validation, and hierarchical data structures in web applications.
- [Form State Management](https://awesome-repositories.com/f/web-development/form-state-management.md) — Tracks input values, field status, and lifecycle events using reactive state containers to ensure UI synchronization. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/CHANGELOG.md))
- [Form Validation Libraries](https://awesome-repositories.com/f/web-development/form-validation-libraries.md) — Applies synchronous or asynchronous validation rules to fields and displays reactive error messages based on custom functions. ([source](https://foxhound87.github.io/mobx-react-form-demo))
- [MobX Implementations](https://awesome-repositories.com/f/web-development/observable-state-patterns/mobx-implementations.md) — Manages complex form state, validation, and nested data structures using MobX observables in web applications.
- [Observable State Tracking](https://awesome-repositories.com/f/web-development/proxy-based-state-handlers/observable-state-tracking.md) — Uses reactive data containers to automatically synchronize user interface components with underlying form field values and validation states.
- [Form Field State Management](https://awesome-repositories.com/f/web-development/form-field-state-management.md) — Monitors field lifecycle events including validation status, user interaction, and dirty state using reactive observables. ([source](https://foxhound87.github.io/mobx-react-form/docs/api-reference/fields-properties.html))
- [Form Renderers](https://awesome-repositories.com/f/web-development/form-management-libraries/form-renderers.md) — Decouples form logic from presentation to allow integration with any component library or standard elements using a unified definition. ([source](https://foxhound87.github.io/mobx-react-form-demo))
- [Form Value Initialization](https://awesome-repositories.com/f/web-development/form-value-initialization.md) — Configures form structure, initial values, and validation rules during instantiation to establish the data model. ([source](https://foxhound87.github.io/mobx-react-form/docs/form/))

### Part of an Awesome List

- [Nested Form Validation](https://awesome-repositories.com/f/awesome-lists/devtools/forms-and-validation/nested-form-validation.md) — Organizes deeply hierarchical or dynamic form inputs into structured models that support recursive validation and automated state updates.
- [Forms and Validation](https://awesome-repositories.com/f/awesome-lists/devtools/forms-and-validation.md) — Provides a framework-agnostic tool for defining synchronous and asynchronous validation rules across hierarchical form fields and nested data collections.

### Software Engineering & Architecture

- [Asynchronous Validation Engines](https://awesome-repositories.com/f/software-engineering-architecture/custom-validation-rules/asynchronous-validation-engines.md) — Executes complex synchronous or asynchronous validation rules against user inputs to ensure data integrity before submission to a backend.
- [Schema-Driven Validations](https://awesome-repositories.com/f/software-engineering-architecture/data-validation-schemas/schema-driven-validations.md) — Executes synchronous or asynchronous rules against field values to enforce data integrity and manage error visibility states.
- [Component State Bindings](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/component-state-bindings.md) — Connects functional components to a centralized data store to read and react to specific state updates.
- [Computed Fields](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-field-defaults/computed-fields.md) — Calculates field values dynamically based on other form or field data by providing functions within the field definition. ([source](https://foxhound87.github.io/mobx-react-form/docs/extra/computed-props.html))
- [Lifecycle Event Hooks](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-event-hooks.md) — Executes custom logic during field changes, validation cycles, or submission events to respond to specific state transitions. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/README.md))
- [Property Interception Middleware](https://awesome-repositories.com/f/software-engineering-architecture/property-interception-middleware.md) — Wraps getters and setters to modify internal state updates and property changes before they commit.
- [Path-Based State Addressing](https://awesome-repositories.com/f/software-engineering-architecture/state-change-observers/path-based-state-observers/path-based-state-addressing.md) — Enables dynamic access and manipulation of nested form fields using string-based paths to locate specific data nodes.
- [Validation Error Handlers](https://awesome-repositories.com/f/software-engineering-architecture/validation-error-handlers.md) — Determines the timing and conditions for displaying validation error messages based on specific form events like blur or change. ([source](https://foxhound87.github.io/mobx-react-form/docs/form/form-options.html))

### Data & Databases

- [Field Transformations](https://awesome-repositories.com/f/data-databases/field-transformations.md) — Cleans or transforms input values automatically, such as trimming whitespace or parsing numeric strings, before they are processed or stored. ([source](https://foxhound87.github.io/mobx-react-form/docs/form/form-options.html))

### Development Tools & Productivity

- [State Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools.md) — Provides specialized tooling to inspect and visualize the internal state, validation status, and data flow of forms during development. ([source](https://github.com/foxhound87/mobx-react-form/blob/master/README.md))

### Programming Languages & Runtimes

- [Reactive Array Synchronizers](https://awesome-repositories.com/f/programming-languages-runtimes/array-mapping-functions/nested-data-processors/reactive-array-synchronizers.md) — Updates computed properties for nested field arrays automatically whenever new items are added to the collection. ([source](https://foxhound87.github.io/mobx-react-form/docs/extra/computed-props.html))
- [Component Extension Systems](https://awesome-repositories.com/f/programming-languages-runtimes/class-based-architecture/component-extension-systems.md) — Customizes the behavior of forms and individual fields by injecting additional logic or properties into the base class definitions. ([source](https://foxhound87.github.io/mobx-react-form/docs/form/))
- [Complex Data Structure Support](https://awesome-repositories.com/f/programming-languages-runtimes/complex-data-structure-support.md) — Supports deeply nested field hierarchies and dynamic collections, allowing for reactive updates to complex object trees. ([source](https://foxhound87.github.io/mobx-react-form-demo))