Advanced
This section covers advanced features and patterns, including the complete set of interactive demo implementations available in the live demo.
Each demo below links to its source code so you can see the implementation in context.
Demo Implementations
| Demo | Description | Source |
|---|---|---|
| Sortable List | Drag-and-drop reordering of array fields using move() | FormSortableList.tsx |
| Interceptors | Intercept field value changes before they propagate | FormInterceptors.tsx |
| Observers | Observe field changes with MobX reactivity | FormObservers.tsx |
| Forms Composer | Manage multiple forms as a single unit (API) | FormComposer.tsx |
| Reactive Computed | Row-level computed totals reacting to input changes | FormReactiveComputed.tsx |
| Cross Validation | Validate related fields across form groups | FormCrossValidation.tsx |
| Nested Composition | Compose independent Form instances together | FormNestedComposition.tsx |
| Wizard (multi-step) | Multi-step wizard with per-step validation | FormWizard.tsx |
| Bindings Demo | Custom field bindings for different input types | FormBindingsDemo.tsx |
| Markdown Editor | Live markdown preview bound to a form field | FormMarkdown.tsx |
| File Upload | File input and drag-and-drop upload handling | FormFileUpload.tsx |
Advanced Internals
| Topic | Description |
|---|---|
| ArrayMap | The ordered key-value collection powering dynamic array fields |
💡 Tip: Run
npm run devin the demo repository to explore these implementations locally.
📘 API features (Computed Props, Converters, MobX Events, Forms Composer) are in the Extra section.