MobX React Form

Demo

Basics

Login FormRegistration Form

Validation

DVRVJFZODAsync

Dynamic Data

ArraysNestedBubble ErrorsDynamic Fields

Advanced

InterceptorsObserversComposerReactive ComputedCross ValidationNested CompositionWizardBindingsMarkdownFile UploadSortable List

UI Libraries

Material UIMaterial Adv.VanillaWidgetsHeadless UIAnt DesignReact AriaReact-SelectReact-Multi
Docs NPM GitHub
Advanced

Custom Field Bindings Demo

Custom field bindings with transformation, formatting, and currency-style coercion. Bindings sit between the DOM and the form state and can rewrite values in either direction.

Docs

Bindings Demo

How field.bind() maps field properties to input props

What are Bindings?

A binding is a function that receives { $try, field, props } and returns the props to spread onto an input element. Each field can use a different binding to customize its behavior — like auto-uppercasing, numeric filtering, or debug logging.

DefaultInput
field.bind()

Standard prop mapping — passes name, value, onChange, and placeholder directly to the input.

UppercaseInput
field.bind()

Custom onChange handler transforms input to uppercase before updating the field value.

CurrencyInput
field.bind()

Custom onChange strips non-numeric characters and preserves cursor position.

DebugInput
field.bind()

Overrides onChange, onBlur, onFocus, and onKeyDown to log every event to the browser console.