MobX React Form

https://foxhound87.github.io/mobx-react-form
Admin
MobX React Form is a reactive form state management library for React applications, offering...
Tokens:70,324
Snippets:971
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install all skills

Source: https://foxhound87.github.io/mobx-react-form/skills

Use this command to install the entire collection of skills from the repository.

```bash
npx skills add https://github.com/foxhound87/skills --all
```

--------------------------------

### Example: Putting It All Together

Source: https://foxhound87.github.io/mobx-react-form/extra/validated-value

A comprehensive example demonstrating field configuration, individual validated value access, and flat map generation.

```javascript
const fields = [
  'username',
  'profile.displayName',
  'profile.email',
];

const values = {
  username: 'johndoe',
  profile: {
    displayName: 'John Doe',
    email: 'john@example.com',
  },
};

const validatedWith = {
  'profile.displayName': 'extra', // validates field.extra instead
};

const form = new Form({ fields, values, validatedWith });

// Access individual validated values
form.$('username').validatedValue;       // 'johndoe'
form.$('profile.displayName').validatedValue; // field.extra value

// Get all validated values as flat map
form.flatMapValues;
// => {
//   'username': 'johndoe',
//   'profile.displayName': <field.extra value>,
//   'profile.email': 'john@example.com',
// }
```

--------------------------------

### Install individual skills

Source: https://foxhound87.github.io/mobx-react-form/skills

Install specific skills by referencing their name to keep the AI context focused.

```bash
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-api
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-validation
npx skills add https://github.com/foxhound87/skills --skill mobx-react-form-bindings
```

--------------------------------

### Install JOI dependency

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/JOI/setup

Install the required JOI package via npm to enable the plugin.

```bash
npm install --save joi
```

--------------------------------

### Install MobX React Form

Source: https://foxhound87.github.io/mobx-react-form-demo?section=bindingsDemo

Use this command to install the core library for defining forms, fields, and validation.

```bash
npm i --save mobx-react-form
```

--------------------------------

### Looping Example

Source: https://foxhound87.github.io/mobx-react-form-demo/form/markdown

A simple loop structure demonstrating basic iteration syntax.

```text
# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }
```

--------------------------------

### Install skills for a specific agent

Source: https://foxhound87.github.io/mobx-react-form/skills

Target a specific AI agent by name during the installation process.

```bash
npx skills add https://github.com/foxhound87/skills --all -a <agent-name>
```

```bash
npx skills add https://github.com/foxhound87/skills --all -a opencode
```

--------------------------------

### Install validatorjs package

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/DVR/setup

Manual installation of the required validatorjs dependency.

```bash
npm install --save validatorjs
```

--------------------------------

### Install MobX React Form Devtools

Source: https://foxhound87.github.io/mobx-react-form-demo?section=bindingsDemo

Use this command to install the devtools for real-time inspection of form state, fields, and validation.

```bash
npm i --save mobx-react-form-devtools
```

--------------------------------

### Install ZOD dependency

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/ZOD/setup

Install the ZOD package manually as it is not included by default.

```bash
npm install --save zod
```

--------------------------------

### Install validator package

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/VJF/setup

Manual installation of the validator package required for VJF enhancement.

```bash
npm install --save validator
```

--------------------------------

### Form Initialization via Class Extension

Source: https://foxhound87.github.io/mobx-react-form/form/form-initialization

Shows how to configure a form by extending the Form class and implementing specific methods for setup, plugins, options, bindings, hooks, and handlers.

```javascript
import { Form } from 'mobx-react-form';

class MyForm extends Form {

  setup() {
    return { fields, values, labels /* same as first constructor arg */ };
  }

  plugins() {
    return { dvr: dvr({ package: validatorjs }) };
  }

  options() {
    return { validateOnChange: true };
  }

  bindings() {
    return { /* custom bindings */ };
  }

  hooks() {
    return { onSuccess(form) { /* ... */ } };
  }

  handlers() {
    return { onSubmit(e) { /* ... */ } };
  }
}
```

--------------------------------

### Perform Field Value Operations

Source: https://foxhound87.github.io/mobx-react-form/api-reference/fields-methods

Examples of getting and setting field properties, updating values, adding nested entries, and manipulating array fields.

```javascript
// Get all props
form.$('username').get();

// Set field value
form.$('username').set('newValue');

// Set a specific prop
form.$('username').set('label', 'Display Name');

// Add to nested array
form.$('members').add({ firstname: 'John', lastname: 'Doe' });

// Add to simple array
form.$('hobbies').add({ value: 'Tennis' });

// Delete by key
form.$('members').del(0);

// Move array item
form.$('members').move(0, 2);

// Update multiple values
form.update({ username: 'Jane', email: 'jane@example.com' });
```

--------------------------------

### Install AJV dependency

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/SVK/setup

Install the required ajv package manually as it is not included by default.

```bash
npm install --save ajv
```

--------------------------------

### Configure DVR Plugin

Source: https://foxhound87.github.io/mobx-react-form/troubleshooting

Install the validatorjs package and initialize the DVR plugin to resolve validation rule errors.

```bash
npm install --save validatorjs
```

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

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

new Form({ fields, rules }, { plugins });
```

--------------------------------

### Form(setup: FieldsDefinitions, config: FormConfig)

Source: https://foxhound87.github.io/mobx-react-form/AGENTS

Instantiates a new form instance with field definitions and configuration options.

```APIDOC
## Form Constructor

### Description
Creates a new form instance. The form is the entry point for managing field state, validation, and lifecycle hooks.

### Signature
`new Form(setup: FieldsDefinitions, config: FormConfig)`

### Configuration Options
- **plugins** (Object) - Validation drivers (dvr, vjf, svk, yup, zod, joi)
- **hooks** (Object) - Lifecycle callbacks (onInit, onChange, onSuccess, onError)
- **handlers** (Object) - Custom event handlers (onSubmit, onKeyDown)
- **options** (OptionsModel) - Form behavior flags
- **bindings** (Record) - Custom rewriters or templates
- **extra** (Record) - Arbitrary metadata
- **name** (string) - Form name for debugging

### Example
```javascript
const form = new Form(
  { fields: [{ name: 'email', label: 'Email', rules: 'required|email' }] },
  { plugins: { dvr: dvr({ package: validatorjs }) }, hooks: { onSuccess(form) { ... } } }
);
```

--------------------------------

### Enable Multiple Validation Plugins

Source: https://foxhound87.github.io/mobx-react-form/AGENTS

Configuration example for enabling DVR and VJF validation drivers simultaneously.

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

--------------------------------

### Define Form Fields

Source: https://foxhound87.github.io/mobx-react-form/advanced/interceptors

Example configuration for form fields with validation rules.

```javascript
const fields = {
  fullName: {
    value: 'John Doe',
    label: 'Full Name',
    placeholder: 'Enter your name',
    rules: 'required|string|min:3',
  },
  email: {
    value: 'john@example.com',
    label: 'Email',
    placeholder: 'Enter your email',
    rules: 'required|email',
  },
  role: {
    value: 'user',
    label: 'Role',
    placeholder: 'Select role',
    rules: 'required|string',
  },
};
```

--------------------------------

### Install YUP dependency

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/YUP/setup

Install the yup package manually as it is not included in the mobx-react-form package.

```bash
npm install --save yup
```

--------------------------------

### Get all Fields Placeholders

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field placeholders. This is a shortcut for get('placeholder').

```javascript
.placeholders();
```

--------------------------------

### Initialize and Register Forms

Source: https://foxhound87.github.io/mobx-react-form/devtools

Register forms, select the active form, and render the UI component to start using the devtools.

```javascript
import MobxReactFormDevTools from 'mobx-react-form-devtools';

// register forms
MobxReactFormDevTools.register({
  loginForm,
  registerForm,
  supportForm,
});

// select form to show into the devtools
MobxReactFormDevTools.select('registerForm');

// open the devtools (closed by default)
MobxReactFormDevTools.open(true);

// render the component
<MobxReactFormDevTools.UI />
```

--------------------------------

### Define File Fields in Form Setup

Source: https://foxhound87.github.io/mobx-react-form/advanced/file-upload

Configure fields with type: 'file' to enable file handling capabilities.

```javascript
const fields = {
  myFileUpload: {
    type: 'file',
    hooks: {
      onDrop: field => console.log('onDrop', field.files),
    },
  },
  myDropZone: {
    type: 'file',
    hooks: {
      onDrop: field => console.log('onDrop', field.files),
    },
  },
};
```

--------------------------------

### Define form fields and initial values

Source: https://foxhound87.github.io/mobx-react-form/advanced/sortable

Setup structure for array fields and their nested properties.

```javascript
const fields = [
  'products[]',
  'products[].name',
  'products[].price',
  'products[].quantity',
];

const values = {
  products: [
    { name: 'Product 1', price: 10, quantity: 1 },
    { name: 'Product 2', price: 20, quantity: 2 },
  ],
};
```

--------------------------------

### Function Definition

Source: https://foxhound87.github.io/mobx-react-form-demo/form/markdown

A basic function definition example.

```text
define foobar() {
    print "Welcome to flavor country!";
}
```

--------------------------------

### Get all Fields Initials Values

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field initial values. This is a shortcut for get('initial').

```javascript
.initials();
```

--------------------------------

### Get all Fields Labels

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field labels. This is a shortcut for get('label').

```javascript
.labels();
```

--------------------------------

### Configure Field Retrieval Options

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Examples for filtering field values and errors, handling nullish values, and managing soft-deleted fields.

```javascript
// Get only changed, non-disabled values
const options = {
  retrieveOnlyEnabledFieldsValues: true,
  retrieveOnlyDirtyFieldsValues: true,
};

// Remove nulls and empty strings from arrays
const options = {
  removeNullishValuesInArrays: true,  // [1, null, 3, ""] → [1, 3]
};

// Soft delete with preserved values
const options = {
  softDelete: true,
  preserveDeletedFieldsValues: true,
};
```

--------------------------------

### Get Form Option by Key

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Retrieve a specific option value by providing its key.

```javascript
const value = form.state.options.get('showErrorsOnInit');
// => true
```

--------------------------------

### Configure form submission behavior

Source: https://foxhound87.github.io/mobx-react-form/validation/lifecycle

Examples of calling form.submit() with specific options to bypass validation or hooks.

```javascript
// Minimal submit — skip validation entirely
form.submit({}, { validate: false });

// Submit without firing hooks
form.submit({}, { execOnSubmitHook: false, execValidationHooks: false });
```

--------------------------------

### Get and Set Form Values

Source: https://foxhound87.github.io/mobx-react-form/AGENTS

Methods for retrieving and updating field values individually or in bulk.

```javascript
// Single
form.$('email').value;                  // get
form.$('email').value = 'new@test.com'; // set via setter
form.$('email').set('new@test.com');    // set via method
form.set('email', 'new@test.com');      // set via form

// Bulk
form.values();                          // { email: '...', address: { city: '...' } }
form.update({ email: 'new@test.com', address: { city: 'New York' } });  // nested
form.get('value');                      // same as values()
form.get('error');                      // { email: '...', address: { city: '...' } }
form.errors();                          // same
form.get(['value', 'error']);           // { email: { value: '...', error: '...' } }
form.$('email').get(['value', 'error']); // { value: '...', error: '...' }

// Field-level
field.value;                            // get
field.value = 'new';                    // set
field.initial;                          // original value
field.default;                          // default value
field.validatedValue;                   // value after converters applied
```

--------------------------------

### Initialize form with plugins

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/DVR/setup

Creating a new form instance by passing the configured plugins object.

```javascript
new Form({ fields }, { plugins });
```

--------------------------------

### Initialize Form with Options

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Applying configuration options during the instantiation of the Form class.

```javascript
import { Form } from 'mobx-react-form';

const options = {
  showErrorsOnInit: true,
  validateOnChange: true,
  autoParseNumbers: false,
};

const form = new Form({ fields }, { options });
```

--------------------------------

### Configure JOI plugin

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/JOI/setup

Initialize the JOI plugin by passing the package and schema to the configuration object.

```javascript
import joi from 'mobx-react-form/lib/validators/JOI';
import j from 'joi';

const plugins = {
  joi: joi({
    package: j,
    schema: $schema,
    extend: ({ validator, form }) => {
      ... // access joi validator and form instances
    },
  })
};
```

--------------------------------

### Get all Fields Types

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field types. This is a shortcut for get('type').

```javascript
.types();
```

--------------------------------

### Form Constructor Usage

Source: https://foxhound87.github.io/mobx-react-form/form/form-initialization

Demonstrates various ways to initialize a form using the constructor, ranging from simple field definitions to full configurations including plugins, options, and hooks.

```javascript
import { Form } from 'mobx-react-form';

// Unified fields only
new Form({ fields });

// Unified + plugins + bindings
new Form({ fields }, { plugins, bindings });

// Separated mode + options
new Form({ values, labels, handlers, ... }, { options });

// Separated mode + validation + plugins
new Form({ values, labels, handlers, rules, ... }, { plugins });

// Full setup
new Form(
  { fields, values, labels, rules },
  { plugins, options, bindings, hooks },
);
```

--------------------------------

### Get all Fields Errors

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field error messages. This is a shortcut for get('error').

```javascript
.errors();
```

```javascript
=> {
  username: 'The Username Error',
  password: 'The Password Error',
}
```

--------------------------------

### Get all Fields Values

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field key-value pairs. This is a shortcut for get('value').

```javascript
.values();
```

```javascript
=> {
  username: 'TheUsername',
  password: 'ThePassword',
}
```

--------------------------------

### Navigate and Select Fields

Source: https://foxhound87.github.io/mobx-react-form/api-reference/fields-methods

Demonstrates field selection using paths, aliases, and chaining, as well as accessing the parent container.

```javascript
form.$('address.city');              // via alias
form.select('members[0].firstname'); // via select()
form.$('members').$(0).$('firstname'); // chained
form.$('members').container();       // → the form itself (root)
```

--------------------------------

### Initialize a simple form

Source: https://foxhound87.github.io/mobx-react-form/AGENTS

Create a basic form instance with validation rules and success hooks.

```javascript
const form = new Form({
  fields: [{ name: 'email', rules: 'required|email' }]
}, {
  plugins: { dvr: dvr({ package: validatorjs }) },
  hooks: { onSuccess: (f) => console.log(f.values()) },
});
```

--------------------------------

### Using the bind() Method

Source: https://foxhound87.github.io/mobx-react-form/bindings

Demonstrates calling the bind method with and without property overrides.

```javascript
const outputProps = field.bind();
// or with overrides:
const outputProps = field.bind({ type: 'password', placeholder: 'Enter password' });
```

--------------------------------

### Get all Fields Defaults Values

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Retrieves an object containing all field default values. This is a shortcut for get('default').

```javascript
.defaults();
```

--------------------------------

### Algorithm Steps

Source: https://foxhound87.github.io/mobx-react-form-demo/form/markdown

A sequence of steps for a cooking algorithm.

```text
find wooden spoon
uncover pot
stir
cover pot
balance wooden spoon precariously on pot handle
wait 10 minutes
goto first step (or shut off burner when done)
```

--------------------------------

### Define Wizard Steps

Source: https://foxhound87.github.io/mobx-react-form/advanced/wizard

Configure the steps and map them to their respective field groups.

```jsx
const steps = [
  { key: 'step1', label: 'Personal Info', icon: User },
  { key: 'step2', label: 'Address', icon: MapPin },
  { key: 'step3', label: 'Account', icon: Settings },
  { key: 'review', label: 'Review', icon: ClipboardCheck },
];

const stepFields = {
  step1: ['firstName', 'lastName', 'email', 'phone'],
  step2: ['street', 'city', 'zipCode', 'country'],
  step3: ['username', 'password', 'confirmPassword'],
};
```

--------------------------------

### Instantiate a Form

Source: https://foxhound87.github.io/mobx-react-form/AGENTS

Initialize a new form instance with field definitions, validation plugins, and lifecycle hooks.

```javascript
const form = new Form(
  { fields: [{ name: 'email', label: 'Email', rules: 'required|email' }] },
  { plugins: { dvr: dvr({ package: validatorjs }) }, hooks: { onSuccess(form) { ... } } }
);
```

--------------------------------

### Get a specific property

Source: https://foxhound87.github.io/mobx-react-form/actions/get-set

Retrieve the value of a specific property from the form.

```javascript
form.get('value');
form.get('label');
form.get('disabled');
```

--------------------------------

### Get Field Data Methods

Source: https://foxhound87.github.io/mobx-react-form/actions/helpers

Methods to retrieve aggregated data from all fields.

```APIDOC
## Data Retrieval Methods

### Methods
- `.values()`: Returns an object with all fields key:val pairs of values.
- `.errors()`: Returns an object with all fields key:val pairs of errors.
- `.labels()`: Returns an object with all fields key:val pairs of labels.
- `.placeholders()`: Returns an object with all fields key:val pairs of placeholders.
- `.defaults()`: Returns an object with all fields key:val pairs of default values.
- `.initials()`: Returns an object with all fields key:val pairs of initial values.
- `.types()`: Returns an object with all fields key:val pairs of types.
```

--------------------------------

### Configure SVK plugin

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/SVK/setup

Initialize the SVK plugin with the AJV package and schema.

```javascript
import svk from 'mobx-react-form/lib/validators/SVK';
import ajv from 'ajv';

const plugins = {
  svk: svk({
    package: ajv,
    schema: $schema,
    options: { ... }, // ajv options
  })
};
```

--------------------------------

### new Form(fields, options)

Source: https://foxhound87.github.io/mobx-react-form/form/form-initialization

Initializes a new form instance using constructor arguments. The first argument defines fields and data, while the second argument configures plugins, options, bindings, and hooks.

```APIDOC
## new Form(fields, options)

### Description
Initializes the form instance. All properties in both arguments are optional and can be mixed.

### Parameters
- **fields** (Object) - Required - Defines fields, values, labels, rules, and handlers.
- **options** (Object) - Optional - Configuration object containing:
  - **plugins** (Object) - Validation plugins.
  - **options** (Object) - Form-level behavior settings.
  - **bindings** (Object) - Input component prop bindings.
  - **extra** (Object) - Extra objects accessible via `form.extra`.
  - **hooks** (Object) - Event hooks (onInit, onSubmit, onSuccess, onError, onClear, onReset, onAdd, onDel).
  - **handlers** (Object) - Event handlers (onSubmit, onClear, onReset, onAdd, onDel).
```

--------------------------------

### Configure ZOD plugin

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/ZOD/setup

Initialize the ZOD plugin by passing the ZOD package and the schema definition.

```javascript
import zod from 'mobx-react-form/lib/validators/ZOD';
import z from 'zod';

const plugins = {
  zod: zod({
    package: z,
    schema: $schema,
    extend: ({ validator, form }) => {
      ... // access zod validator and form instances
    },
  })
};
```

--------------------------------

### Get Current Form Options

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Retrieve the full object of current form options.

```javascript
const allOptions = form.state.options.get();
// => { validateOnInit: false, validateOnChange: true, ... }
```

--------------------------------

### Get all properties

Source: https://foxhound87.github.io/mobx-react-form/actions/get-set

Retrieve an object containing all field properties for a form or a specific field.

```javascript
form.get();
form.$('username').get();
```

--------------------------------

### DVR configuration for versions below 1.37

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/DVR/extend

Legacy configuration method for DVR plugins in versions prior to 1.37.

```javascript
import validatorjs from 'validatorjs';

const plugins = {
  dvr: {
    package: validatorjs,
    extend: () => { ... },
  },
};
```

--------------------------------

### Initialize a Form Composer

Source: https://foxhound87.github.io/mobx-react-form/extra/composer

Create a composer instance by passing an object containing multiple MobxReactForm instances.

```javascript
import { composer } from 'mobx-react-form/lib/composer';

const forms = composer({
    formA: new FormA({ ...formDefinitionsA }),
    formB: new FormB({ ...formDefinitionsB }),
    formC: new FormC({ ...formDefinitionsC }),
});
```

--------------------------------

### Rendering fields with field.bind()

Source: https://foxhound87.github.io/mobx-react-form/advanced/bindings-demo

Example of passing form fields to an Input component that utilizes field.bind().

```jsx
<Input field={form.$('username')} />
<Input field={form.$('productCode')} />
<Input field={form.$('price')} />
<Input field={form.$('notes')} />
```

--------------------------------

### Define dynamic array fields

Source: https://foxhound87.github.io/mobx-react-form/advanced/array-map

Example of defining field structures that utilize ArrayMap for storage.

```javascript
const fields = [
  'hobbies',
  'hobbies[]',           // array of strings
  'products[]',          // array of objects
  'products[].name',
  'products[].price',
  'products[].quantity',
];
```

--------------------------------

### Configure SVK for versions below 1.37

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/SVK/setup

Legacy configuration method for versions prior to 1.37.

```javascript
import ajv from 'ajv';

const plugins = {
  svk: ajv
};
```

```javascript
new Form({ ..., schema }, { plugins });
```

--------------------------------

### Instantiating the Custom Form

Source: https://foxhound87.github.io/mobx-react-form/form/extend/custom

Creates and exports an instance of the custom form class.

```javascript
export default new MyForm( ... );
```

--------------------------------

### Value Operations Methods

Source: https://foxhound87.github.io/mobx-react-form/api-reference/fields-methods

Methods for getting, setting, updating, adding, deleting, and moving field values.

```APIDOC
## get()
### Description
Get all field data with all props and computed values.
### Signature
() => any

## get(prop)
### Description
Get value of a specific prop (or an array of props).
### Signature
(prop: string or string[]) => any

## set(val)
### Description
Set field value directly.
### Signature
(val: any) => void

## set(obj)
### Description
Set nested field values from an object.
### Signature
(obj: object) => void

## set(prop, val)
### Description
Set a specific field property.
### Signature
(prop: string, val: any) => void

## set(prop, obj)
### Description
Set a property on nested fields from an object.
### Signature
(prop: string, obj: object) => void

## update(fields)
### Description
Update field values, auto-creating new fields as needed.
### Signature
(fields: object) => void

## add(obj)
### Description
Add a new field or nested field entry.
### Signature
(obj?: any) => any

## del(key)
### Description
Delete a field or nested field by key or path.
### Signature
(key: string) => void

## move(fromIndex, toIndex)
### Description
Move an array field item from one index to another.
### Signature
(from: number, to: number) => void
```

--------------------------------

### Configure YUP plugin

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/YUP/setup

Initialize the plugin object by passing the yup package and the schema definition.

```javascript
import yup from 'mobx-react-form/lib/validators/YUP';
import $pkg from 'yup';

const plugins = {
  yup: yup({
    package: $pkg,
    schema: $schema,
    extend: ({ validator, form }) => {
      ... // access yup validator and form instances
    },
  })
};
```

--------------------------------

### Recommended File Handling with type: 'file'

Source: https://foxhound87.github.io/mobx-react-form/events/event-handlers

Define the field type as 'file' to automatically delegate onChange to onDrop.

```javascript
const fields = {
  avatar: {
    type: 'file',
    hooks: {
      onDrop(field) {
        const file = field.files?.[0];
        if (file) console.log('Uploaded:', file.name);
      },
    },
  },
};
```

```html
<input type="file" multiple {...field.bind()} />
```

--------------------------------

### Get nested fields as objects

Source: https://foxhound87.github.io/mobx-react-form/actions/get-set

Retrieve nested fields structured as objects by passing an array of property names.

```javascript
form.get(['label']);
// { address: { city: 'City Name' } }

form.get(['value', 'label']);
// { username: { value: 'Steve', label: 'Username' } }
```

--------------------------------

### Instantiate the Form

Source: https://foxhound87.github.io/mobx-react-form/quick-start-class

Create an instance of the defined form class.

```javascript
const form = new MyForm();
```

--------------------------------

### Set Initial Values

Source: https://foxhound87.github.io/mobx-react-form/advanced/wizard

Populate the form with initial data to ensure the review step displays correctly.

```javascript
const values = {
  step1: { firstName: 'John', lastName: 'Doe', email: 'john@example.com', phone: '+1 555-1234' },
  step2: { street: '456 Oak Avenue', city: 'San Francisco', zipCode: '94102', country: 'USA' },
  step3: {},
};
```

--------------------------------

### Legacy Validation Hook Configuration

Source: https://foxhound87.github.io/mobx-react-form/events/validation-hooks

Example of the deprecated onSubmit configuration pattern used in versions prior to 1.32.

```javascript
const onSubmit = {
  onSuccess(form) {
    console.log('Form Values!', form.values());
  },
  onError(form) {
    console.log('All form errors', form.errors());
  },
};

new Form({ ... }, { onSubmit }); // <--- was `onSubmit`, now `hooks`
```

--------------------------------

### Combined validation result structure

Source: https://foxhound87.github.io/mobx-react-form/advanced/cross-validation

Example JSON output representing the aggregated state of multiple form groups.

```json
{
  "valid": true,
  "errors": { "billing": {}, "shipping": {} },
  "values": {
    "billing": { "username": "johndoe", "email": "john@example.com", "password": "secret123" },
    "shipping": { "fullName": "John Doe", "emailConfirm": "john@example.com", "bio": "..." }
  }
}
```

--------------------------------

### Apply bindings to all fields of a type

Source: https://foxhound87.github.io/mobx-react-form/bindings/custom

Use the onInit hook to automatically assign bindings to fields matching specific criteria.

```javascript
class MyForm extends Form {
  onInit() {
    this.each(field =>
      field.type === 'text' && field.set('bindings', 'MaterialTextField')
    );
  }
}
```

```javascript
class MyField extends Field {
  onInit() {
    if (this.type === 'text') this.set('bindings', 'MaterialTextField');
  }
}
```

--------------------------------

### Configuring Form Constructor

Source: https://foxhound87.github.io/mobx-react-form/migration-guide

In v6.x, options and plugins must be passed as the second argument to the Form constructor.

```javascript
// v6.x — second argument
new Form({ fields }, {
  options: { validateOnChange: true },
  plugins: { dvr: dvr({ package: validatorjs }) },
});
```

--------------------------------

### get()

Source: https://foxhound87.github.io/mobx-react-form/actions/get-set

Retrieves field properties or values from Form or Field instances. Can return specific properties, all properties, or nested structures.

```APIDOC
## get(prop?)

### Description
Returns an object with field properties or specific values. Available on both Form and Field instances.

### Parameters
- **prop** (string | array) - Optional - The property name to retrieve, or an array of property names to retrieve nested fields as objects.

### Usage
```javascript
// Get all props
form.get();
form.$('username').get();

// Get a specific prop
form.get('value');

// Get nested fields as objects
form.get(['value', 'label']);
```
```

--------------------------------

### Define Fields with Default and Initial Values

Source: https://foxhound87.github.io/mobx-react-form/fields

Sets the initial value on mount and the value applied after a form reset.

```javascript
const fields = {
  newsletter: {
    label: 'Subscribe',
    type: 'checkbox',
    value: true,    // initial value on mount
    default: false, // value after reset
  },
};
```

--------------------------------

### Implementing Explicit PathsOf Usage

Source: https://foxhound87.github.io/mobx-react-form/typescript

Provides examples of using PathsOf in custom helper functions and field iteration callbacks.

```typescript
import { Form, PathsOf } from 'mobx-react-form';

// Helper with typed path
function getField<T extends Record<string, any>>(
  form: Form<T>,
  path: keyof T | PathsOf<T>
) {
  return form.$(path as any);
}

// Typed callback
form.each((field) => {
  if (field.path === 'email') {
    // field is typed as Field<any>
  }
});
```

--------------------------------

### Implement custom VJF validation function

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/VJF/setup

Example of a custom validation function utilizing the validator instance provided by the plugin.

```javascript
export function isEmail({ field, validator }) {
  const isValid = validator.isEmail(field.value); // <<---
  return [isValid, `The ${field.label} should be an email address.`];
}
```

--------------------------------

### Initialize Form with Hooks

Source: https://foxhound87.github.io/mobx-react-form/advanced/reactive-computed

Ensures at least one product row exists when the form initializes.

```javascript
const hooks = {
  onInit(form) {
    if (form.$('products').fields.size === 0) {
      form.$('products').add();
    }
  },
};
```

--------------------------------

### Sync Field Values

Source: https://foxhound87.github.io/mobx-react-form/events/event-handlers

Demonstrates binding standard inputs, explicit onChange handlers, and silent updates using sync.

```html
<input {...field.bind()} />  <!-- bind() handles onChange automatically -->

<!-- Or use onChange explicitly -->
<input onChange={form.$('username').onChange} />

<!-- For custom components that pass values directly -->
<CustomInput onChange={form.$('username').sync} />

<!-- Silent update: no onChange hook triggered -->
<CustomInput onChange={form.$('username').sync} />
```

--------------------------------

### Define Form Fields, Values, and Types

Source: https://foxhound87.github.io/mobx-react-form/advanced/reactive-computed

Configuration for the form structure, initial values, and data types for product fields and the order total.

```javascript
const fields = [
  'products',
  'products[].name',
  'products[].qty',
  'products[].amount',
  'products[].total',
  'orderTotal',
];

const values = {
  products: [
    { name: 'MacBook Pro', qty: 1, amount: 2499, total: 0 },
    { name: 'AirPods Pro', qty: 2, amount: 249, total: 0 },
  ],
};

const types = {
  'products[].qty': 'number',
  'products[].amount': 'number',
  'products[].total': 'number',
  'orderTotal': 'number',
};
```

--------------------------------

### Markdown Content Representation

Source: https://foxhound87.github.io/mobx-react-form-demo/form/markdown

Example of a complex Markdown string stored as a field value, including headers, lists, blockquotes, and code blocks.

```markdown
An h1 header ============ Paragraphs are separated by a blank line. 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists look like: * this one * that one * the other one Note that --- not considering the asterisk --- the actual text content starts at 4-columns in. > Block quotes are > written like so. > > They can span multiple paragraphs, > if you like. Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺ An h2 header ------------ Here's a numbered list: 1. first item 2. second item 3. third item Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample: # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like: ~~~ define foobar() { print "Welcome to flavor country!"; } ~~~ (which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it: ~~~python import time # Quick, count to ten! for i in range(10): # (but not *too* quick) time.sleep(0.5) print i ~~~ ### An h3 header ### Now a nested list: 1. First, get these ingredients: * carrots * celery * lentils 2. Boil some water. 3. Dump everything in the pot and follow this algorithm: find wooden spoon uncover pot stir cover pot balance wooden spoon precariously on pot handle wait 10 minutes goto first step (or shut off burner when done) Do not bump wooden spoon or it will fall. Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above). Here's a link to [a website](http://foo.bar), to a [local doc](local-doc.html), and to a [section heading in the current doc](#an-h2-header). Here's a footnote [^1]. [^1]: Footnote text goes here. Tables can look like this: size material color ---- ------------ ------------ 9 leather brown 10 hemp canvas natural 11 glass transparent Table: Shoes, their sizes, and what they're made of (The above is the caption for the table.) Pandoc also supports multi-line tables: -------- ----------------------- keyword text -------- ----------------------- red Sunsets, apples, and other red or reddish things. green Leaves, grass, frogs and other things it's not easy being. -------- ----------------------- A horizontal rule follows. *** Here's a definition list: apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe. Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.) Here's a "line block": | Line one | Line too | Line tree Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns: $$I = \int \rho R^{2} dV$$ And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
```

--------------------------------

### Update ref prop to refs in separated mode

Source: https://foxhound87.github.io/mobx-react-form/migration-guide

Use the plural 'refs' prop when working in separated mode starting from version 5.8.0.

```javascript
// v5.8+
const refs = { username: myRef };
new Form({ fields: ['username'], refs });
```

--------------------------------

### Configure SVK for versions below 1.37

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/SVK/extend

Legacy configuration method for versions prior to 1.37, where the schema is passed during form initialization.

```javascript
import ajv from 'ajv';

const plugins = {
  svk: {
    package: ajv,
    extend: () => { ... },
  },
};
```

```javascript
new Form({ ..., schema }, { plugins });
```

--------------------------------

### Configure uniqueId for SSR

Source: https://foxhound87.github.io/mobx-react-form/performance-ssr

Provides examples for generating unique field IDs, including a non-deterministic approach and a fully deterministic approach for SSR consistency.

```javascript
const options = {
  uniqueId: (field) => `${field.path}-${Date.now()}`,
};
```

```javascript
const options = {
  uniqueId: (field) => field.path.replace(/[\[\]\.]/g, '_'),
};
```

--------------------------------

### Handle Navigation

Source: https://foxhound87.github.io/mobx-react-form/advanced/wizard

Implement logic for moving between steps, including validation checks on 'Next'.

```jsx
const handleNext = useCallback(async () => {
  const valid = await validateStep(currentStep);
  if (!valid) return;
  setCompletedSteps((prev) => new Set([...prev, currentStep]));
  setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
}, [currentStep, validateStep]);

const handleBack = useCallback(() => {
  setCurrentStep((prev) => Math.max(prev - 1, 0));
}, []);
```

--------------------------------

### Define VJF plugins object

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/VJF/setup

Configuration patterns for the VJF plugin, including minimal setup and integration with validator.js across different library versions.

```javascript
import vjf from 'mobx-react-form/lib/validators/VJF';

const plugins = {
  vjf: vjf()
};
```

```javascript
import vjf from 'mobx-react-form/lib/validators/VJF';
import validator from 'validator';

const plugins = {
  vjf: vjf({ package: validator })
};
```

```javascript
import vjf from 'mobx-react-form/lib/validators/VJF';
import validator from 'validator';

const plugins = {
  vjf: vjf(validator)
};
```

```javascript
import validator from 'validator';

const plugins = {
  vjf: validator
};
```

--------------------------------

### Configure Validation Plugin

Source: https://foxhound87.github.io/mobx-react-form/quick-start

Initialize the DVR validation plugin using validatorjs.

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

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

--------------------------------

### Configure Third-Party Validation Plugin

Source: https://foxhound87.github.io/mobx-react-form/typescript

Demonstrates how to register custom rules using the extend callback within a DVR plugin configuration.

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

// The extend callback receives typed arguments:
const plugins = {
  dvr: dvr({
    package: validatorjs,
    extend: ({ validator, form }) => {
      // validator: TValidator (the validatorjs instance)
      // form: FormInterface
      validator.register('customRule', ...);
    },
  }),
};
```

--------------------------------

### Implement the extend callback

Source: https://foxhound87.github.io/mobx-react-form/validation/plugins/DVR/extend

Register custom rules within the DVR plugin configuration using the extend callback.

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

const plugins = {
  dvr: dvr({
    package: validatorjs,
    extend: ({ validator, form }) => {
      // here we can access the `validatorjs` instance (validator)
      // and we can add the rules using the `register()` method.
      Object.keys(rules).forEach((key) =>
        validator.register(key, rules[key].function, rules[key].message));
    };
  }),
};

// create the form using the extended `plugins` object
new Form({ ... }, { plugins });
```

--------------------------------

### Configure form fields and bindings

Source: https://foxhound87.github.io/mobx-react-form/advanced/bindings-demo

Define field configurations and map them to specific binding names to control input behavior.

```javascript
const fields = {
  username: {
    value: 'JohnDoe', label: 'Username',
    placeholder: 'Standard text input',
    rules: 'required|string|min:3',
  },
  productCode: {
    value: 'ABC-123', label: 'Product Code',
    placeholder: 'Auto-uppercased on type',
    rules: 'required|string',
  },
  price: {
    value: '1299.99', label: 'Price (€)',
    placeholder: 'Only numbers allowed',
    rules: 'required',
  },
  notes: {
    value: 'Check the console →', label: 'Notes (Debug)',
    placeholder: 'Watch the dev console...',
    rules: 'string',
  },
};

const bindings = {
  username: 'DefaultInput',
  productCode: 'UppercaseInput',
  price: 'CurrencyInput',
  notes: 'DebugInput',
};
```

--------------------------------

### Include UMD dependencies in HTML

Source: https://foxhound87.github.io/mobx-react-form/umd-setup

Load the required libraries including lodash, mobx, the form library, and a validation plugin via script tags.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>MobX React Form (UMD)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="https://unpkg.com/lodash@x.x.x/lodash.min.js"></script>
    <script src="https://unpkg.com/mobx@x.x.x/lib/mobx.umd.js"></script>
    <script src="https://unpkg.com/mobx-react-form@x.x.x/umd/MobxReactForm.umd.min.js"></script>
    <script src="https://unpkg.com/mobx-react-form@x.x.x/umd/MobxReactFormValidatorDVR.umd.min.js"></script>
    <script src="https://unpkg.com/validatorjs@x.x.x/dist/validator.js"></script>
    <script src="source.js"></script>
  </body>
</html>
```

--------------------------------

### Hydrate form on the client

Source: https://foxhound87.github.io/mobx-react-form/performance-ssr

Demonstrates creating a form with consistent configuration and rehydrating it with server-provided values on the client.

```javascript
// Both server and client use the same structure:
const form = new Form({
  fields: { username: { value: '' } },
}, {
  options: {
    uniqueId: (field) => field.path.replace(/[\[\]\.]/g, '_'),
  },
});

// On the client, rehydrate with server values:
form.set('value', serverValues);
```

--------------------------------

### Manage Multi-Step Wizard Forms

Source: https://foxhound87.github.io/mobx-react-form/recipes

Use the composer utility to aggregate multiple form instances and manage navigation between steps.

```javascript
import { composer } from 'mobx-react-form/lib/composer';
import StepOneForm from './StepOneForm';
import StepTwoForm from './StepTwoForm';
import StepThreeForm from './StepThreeForm';

const forms = composer({
  step1: new StepOneForm(),
  step2: new StepTwoForm(),
  step3: new StepThreeForm(),
});

// Navigate steps
function nextStep(currentStep) {
  const current = forms.select(currentStep);
  current.submit({
    onSuccess: () => {
      if (currentStep === 'step3') {
        forms.submit().then(({ forms }) => {
          console.log('All steps valid!', forms);
        });
      }
    },
    onError: () => alert('Fix errors before proceeding'),
  });
}
```

--------------------------------

### Implement File Upload with Preview

Source: https://foxhound87.github.io/mobx-react-form/recipes

Uses the onDrop hook to read a file and store its preview URL, name, and size in the field's extra state.

```javascript
const fields = {
  avatar: {
    label: 'Profile Picture',
    type: 'file',
    hooks: {
      onDrop(field) {
        const file = field.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            field.set('extra', {
              previewUrl: e.target.result,
              fileName: file.name,
              fileSize: file.size,
            });
          };
          reader.readAsDataURL(file);
        }
      },
    },
  },
};
```

--------------------------------

### Implement drag-and-drop reordering

Source: https://foxhound87.github.io/mobx-react-form/advanced/sortable

Integrate the move method with drag-and-drop libraries by passing the source and target indices.

```jsx
import { observer } from 'mobx-react';

const SortableList = observer(({ form }) => {
  const items = form.$('products');

  function onDragEnd(fromIndex, toIndex) {
    items.move(fromIndex, toIndex);
  }

  return (
    <div>
      {items.map(field => (
        <div key={field.key}>
          <input {...field.$('name').bind()} />
        </div>
      ))}
    </div>
  );
});
```

--------------------------------

### Configure Converters and Value Formatting

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Settings for input conversion, whitespace trimming, number parsing, and custom field ID generation.

```javascript
// Auto-trim and auto-parse
const options = {
  autoTrimValue: true,         // "  hello  " → "hello"
  autoParseNumbers: true,      // "20" → 20 (when initial value is a number)
};

// Custom fallback value
const options = {
  fallbackValue: null,         // default is "", now clear() sets null
};

// Deterministic IDs for SSR
const options = {
  uniqueId: (field) => `${field.path}-${Date.now()}`,
};
```

--------------------------------

### Configure Validation on Init

Source: https://foxhound87.github.io/mobx-react-form/troubleshooting

Enable both validateOnInit and showErrorsOnInit to ensure validation runs and errors are displayed immediately upon form initialization.

```javascript
const options = {
  validateOnInit: true,
  showErrorsOnInit: true,
};
```

--------------------------------

### Import Validation Plugins

Source: https://foxhound87.github.io/mobx-react-form/quick-start-class

Import the DVR validator and the validatorjs package.

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

--------------------------------

### Manage Wizard State

Source: https://foxhound87.github.io/mobx-react-form/advanced/wizard

Initialize React state to track the current step, completion status, and validation errors.

```jsx
const [currentStep, setCurrentStep] = useState(0);
const [completedSteps, setCompletedSteps] = useState(new Set());
const [errors, setErrors] = useState({});
```

--------------------------------

### Setting up Validation Plugins

Source: https://foxhound87.github.io/mobx-react-form/migration-guide

The package property is now mandatory when defining validation plugins in v6.x.

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

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

const plugins = {
  dvr: dvr({ package: validatorjs }),  // mandatory `package` prop
};
```

--------------------------------

### Implement a basic InputField component

Source: https://foxhound87.github.io/mobx-react-form/bindings/default

Use the observer pattern and the field.bind() method to connect a form field to an HTML input element.

```jsx
import { observer } from 'mobx-react';

const InputField = observer(({ field }) => (
  <div>
    <label>{field.label}</label>
    <input {...field.bind()} />
  </div>
));
```

--------------------------------

### Form Constructor Options

Source: https://foxhound87.github.io/mobx-react-form/form/form-options

Options are passed as the second argument to the Form constructor to configure form behavior.

```APIDOC
## Form Constructor Options

### Description
Configure the form instance by passing an options object to the constructor.

### Usage
```javascript
import { Form } from 'mobx-react-form';

const options = {
  showErrorsOnInit: true,
  validateOnChange: true,
  autoParseNumbers: false,
};

const form = new Form({ fields }, { options });
```
```

--------------------------------

### Inspect bind() method output

Source: https://foxhound87.github.io/mobx-react-form/bindings/default

The bind() method returns an object containing all necessary props for an input, including event handlers and current values.

```javascript
field.bind();
// → {
//   id: 'username',
//   name: 'username',
//   type: 'text',
//   value: 'SteveJobs',
//   placeholder: 'Enter username',
//   disabled: false,
//   onChange: field.onChange,
//   onBlur: field.onBlur,
//   onFocus: field.onFocus,
//   autoFocus: false,
// }
```

--------------------------------

### Implement DefaultInput Binding

Source: https://foxhound87.github.io/mobx-react-form/advanced/bindings-demo

Maps standard input props like name, value, and onChange using the $try helper.

```javascript
DefaultInput: ({ $try, field, props }) => ({
  type: $try(props.type, field.type, 'text'),
  id: $try(props.id, field.id),
  name: $try(props.name, field.name),
  value: $try(props.value, field.value),
  placeholder: $try(props.placeholder, field.placeholder),
  onChange: $try(props.onChange, field.onChange),
  onBlur: $try(props.onBlur, field.onBlur),
  onFocus: $try(props.onFocus, field.onFocus),
  disabled: props.disabled || field.disabled || field.state.form.disabled,
}),
```
Tokens:
Raw